在开发基于 Express.js 的应用过程中，我们有时需要从不同的域名或端口请求数据。然而，由于浏览器同源策略（Same-origin Policy）的限制，这种跨域请求会被浏览器阻止。
本文将介绍如何解决 Express.js 跨域问题的方法，以及各种方法的优缺点和适用场景。
跨域请求的限制和原理
浏览器同源策略（Same-origin Policy）是浏览器的一项核心安全特性，它限制了不同源之间的数据交互。同源指的是协议、域名、端口号都相同，不同源的请求会被浏览器拦截，防止恶意网站窃取用户的信息。
因此，当我们从 Express.js 应用向不同的域名或端口号发起请求时，浏览器会拦截该请求，不允许把响应结果返回给客户端。
解决跨域问题的方法
1. JSONP
JSONP （JSON with Padding）是一种常用的跨域解决方案，它利用了 script 标签没有跨域限制的特性，通过动态创建 script 标签实现数据请求。
在 Express.js 应用中，我们可以利用 middleware 中间件和 callback 参数实现 JSONP。
示例代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------- ----- ---- -- -
----- ---- - -
----- -------
---- ---
--
----- -------- - -------------------
-------------------------------------------------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---使用 JSONP 可以避免浏览器的同源策略限制，但是也有一些缺点，比如只支持 GET 请求，不支持 POST、PUT 等其他 HTTP 方法，且只能返回 JSON 格式的数据，不能返回其他类型的数据。
2. CORS
CORS（Cross-Origin Resource Sharing）是一种更加先进的跨域解决方案，它通过 HTTP 头部来告诉浏览器是否允许跨域请求资源。CORS 跨域请求包含两种类型：
简单请求：只包含 HTTP 头部信息中的基本字段，如 GET、POST、HEAD 请求等。
预检请求：在简单请求不满足需要时，浏览器会先发送一个 OPTIONS 请求，服务器会在响应中告诉浏览器是否允许跨域请求。
在 Express.js 应用中，我们可以使用 CORS 中间件来实现跨域请求。
安装：
npm install cors
示例代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----------------
---------------- ----- ---- -- -
----- ---- - -
----- -------
---- ---
--
---------------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---通常我们可以将 CORS 中间件全局使用，也可以根据需要设置可跨域访问的域名。但是 CORS 跨域请求需要浏览器和服务器一起支持，如果浏览器不支持，CORS 跨域请求也不会生效。
3. 代理跨域
代理跨域主要是将前端应用的请求通过后端服务代理到目标服务器，由代理服务器进行实际的请求操作。这种方式可以完全绕过浏览器的同源限制，但需要在后端服务器上配置代理规则。
在 Express.js 应用中，我们可以使用 http-proxy-middleware 中间件来实现代理跨域。
安装：
npm install http-proxy-middleware
示例代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- - --------------------- - - ---------------------------------
----- --- - ----------
----------------
----------------- -----------------------
------- ---------------------
------------- -----
------------ -
---------- ---
--
----
---------------- -- -- -
------------------- ------- -- ---- -------
---代理跨域需要在后端服务器上配置代理规则，而且不支持直接访问目标服务器的 Cookie 等敏感信息，因此需要进行身份验证等操作。
总结
本文介绍了三种解决 Express.js 跨域问题的方法，JSONP、CORS、代理跨域。不同的解决方案各有优缺点，应根据实际需求来选择合适的解决方案。
- 如果只需要支持 GET 请求，且只需要返回 JSON 格式数据，可以使用 JSONP 解决跨域问题；
- 如果需要支持 POST、PUT 等其他 HTTP 方法，且需要进行复杂的数据交互，可以使用 CORS 解决跨域问题；
- 如果需要完全绕过浏览器的同源限制，可以使用代理跨域。
以上内容希望对前端同学们解决 Express.js 跨域问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649504b048841e989424b275