在前后端分离的项目中，前端的请求往往需要跨域访问后端 API，此时就会遇到跨域问题。Express.js 是一个常用的 Node.js Web 框架，本文将介绍解决 Express.js 跨域问题的几种思路。
什么是跨域问题？
跨域问题是指前端 JavaScript 发起的 AJAX 请求访问不同域名（例如http://www.example.com、http://api.example.com）或端口（例如http://localhost:8080、http://localhost:3000）的 API，由于浏览器的同源策略保护，这些请求会被浏览器拦截，不允许访问。
1. 启用 CORS 中间件
CORS（Cross-Origin Resource Sharing）是一种跨域资源共享协议，通过在响应头中设置 Access-Control-Allow-Origin 字段实现跨域访问。在 Express.js 中，可以使用 cors 中间件来启用 CORS 支持。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ---------------- -------------------- ----- ---- -- - ---------------- -------- --- ---------------- -- -- - ------------------- -- --------- -- ---- ------- ---
使用 cors 中间件后，访问 http://localhost:8080/api/data 就可以正常获取响应。
2. JSONP 跨域请求
JSONP（JSON with padding）是一种跨域数据访问方案，它利用了 HTML document 中 script 标签的跨域特性，可以绕开浏览器的同源策略。在 Express.js 中，可以返回 JSONP 格式的数据来解决跨域问题。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-------------------- ----- ---- -- -
----- ---- - - -------- ------- ------- --
----- -------- - -------------------
-- ---------- -
-------------------------------------------------
- ---- -
---------------
-
---
---------------- -- -- -
------------------- -- --------- -- ---- -------
---在客户端发送 JSONP 请求时，需要在请求 url 中指定回调函数名，例如：
<script>
function jsonpCallback(data) {
console.log(data.message);
}
const script = document.createElement("script");
script.src = "http://localhost:8080/api/data?callback=jsonpCallback";
document.head.appendChild(script);
</script>3. 代理跨域请求
代理跨域请求的思路是由前端向后端发送请求，后端再向目标 API 发送请求，并将请求结果返回前端。通过这种方式，前端与后端之间的请求就不受同源策略的限制，从而实现跨域访问 API。
在 Express.js 中，可以使用 http-proxy-middleware 中间件来实现代理跨域请求。
-- -------------------- ---- -------
----- ------- - -------------------
----- - --------------------- - - ---------------------------------
----- --- - ----------
--------
-------
-----------------------
------- -------------------------
------------- -----
------------ -
-------- ---
--
--
--
---------------- -- -- -
------------------- -- --------- -- ---- -------
---使用 http-proxy-middleware 中间件后，访问 http://localhost:8080/api/data 就会转发到 http://api.example.com/data，并将结果返回前端。
总结
本文介绍了解决 Express.js 跨域问题的几种思路，包括启用 cors 中间件、使用 JSONP 跨域请求和代理跨域请求。使用这些方法可以让前端通过 AJAX 请求访问不同域名的 API，并且不受浏览器同源策略的限制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6593f793eb4cecbf2d89166c