跨域是 Web 开发中常见的问题，通常在客户端（浏览器）禁止 JavaScript 从不同的源头获取数据时发生。为了解决跨域问题，我们需要设置前端和后端的 CORS（跨域资源共享）规则，以便浏览器允许跨域资源请求。在本文中，我们将介绍 Express.js 中如何处理跨域请求，包括详细的步骤和示例代码。
快速概述
在 Express.js 应用程序中处理跨域请求有两个必要的步骤：
- 设置响应头
- 使用中间件进行拦截
设置响应头
设置响应头通常是设置 Access-Control-Allow-Origin，并将其设置为 *，表示允许来自任何来源的请求。但请注意，这并不是最佳实践，因为它允许所有来源的请求，包括潜在的恶意来源。因此，我们推荐使用具体的域名来设置 Access-Control-Allow-Origin。
----- ------- - ------------------- ----- --- - ---------- ------------- ---- ----- -- - ----------------------------------------- ------------------------- -- ----- ------------------------------------------ -------- ----------------- ------------- --------- ------- ---
在上面的代码中，我们从 http://localhost:3000 设置 Access-Control-Allow-Origin。
使用中间件进行拦截
由于设置响应头并不能阻止跨域请求，因此我们还需要使用中间件进行拦截。常用的中间件是 cors 和 cors-anywhere。
cors 中间件
cors 中间件是官方提供的解决跨域请求的解决方案，可以快速而轻松地为 Express.js 应用程序启用跨域请求。只需使用以下命令安装 cors：
--- ------- ----
然后，我们只需在应用程序中使用 cors 中间件即可：
----- ------- - ------------------- ----- ---- - ---------------- -- -- ---- ----- --- - ---------- -- -- ---- ---------------- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
cors-anywhere 中间件
除了 cors 中间件外，我们还可以使用 cors-anywhere 中间件，它可以在不更改后端代码的情况下，解决跨域请求。在使用 cors-anywhere 之前，我们需要使用以下命令安装它：
--- ------- -------------
然后，我们如下所示将其用作中间件：
----- ------- - ------------------- ----- ------------ - ------------------------- -- -- ------------- ----- --- - ---------- -- -- ------------- ---------------------- ---------------- --- -- -------- -------------- ---------- -------------------- -- --------- -------------- ---------- ---------- -- --------- ---- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
示例代码
下面是一个完整的 Express.js 应用程序，使用 cors 中间件来解决跨域请求：
----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- -- -- ---- --- ---------------- -- --- -- -------------------- ----- ---- -- - ----- ---- - --------- --------- --------- -------- --------------- --- -- ---- -- --------------------- ----- ---- -- - ----- ------- - --------- ------------------ --- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
结论
通过设置响应头并使用中间件进行拦截，我们可以轻松地处理 Express.js 应用程序中的跨域请求。在实际应用中，请仔细考虑设置特定的域和头，以确保安全和最佳实践。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671460dcad1e889fe21387e6