CORS 跨域请求是指浏览器在向不同域名的服务器请求数据时，由于同源策略的限制，无法获取到服务器返回的数据。为了解决这个问题，我们可以使用跨域资源共享（CORS）来允许跨域请求。
在前端开发中，我们经常会使用 Express.js 框架来构建 Web 应用程序。接下来，我们将介绍如何使用 Express.js 框架处理 CORS 跨域请求。
安装依赖
首先，我们需要安装 cors 模块，它是一个 Express.js 中间件，用于处理 CORS 跨域请求。
可以使用以下命令来安装 cors 模块：
npm install cors --save
在 Express.js 中启用 CORS
在 Express.js 应用程序中启用 CORS 很简单，只需要在代码中添加以下几行代码：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());以上代码中，我们首先引入了 express 和 cors 模块，并创建了一个 Express.js 应用程序实例。然后，我们使用 app.use(cors()) 中间件来启用 CORS。这将允许跨域请求访问我们的服务器资源。
配置 CORS
除了使用默认配置外，我们还可以配置 cors 中间件来满足我们的需求。以下是一些常用的配置选项：
origin：允许访问的来源，可以是字符串或函数。methods：允许使用的 HTTP 方法，可以是字符串或数组。allowedHeaders：允许的请求头，可以是字符串或数组。exposedHeaders：允许客户端访问的响应头，可以是字符串或数组。credentials：是否允许发送身份凭证，可以是布尔值。maxAge：预检请求的有效时间，以秒为单位。
以下是一个示例配置：
-- -------------------- ---- ------- ----- ----------- - - ------- --------------------- -------- ------- ------- ------- --------------- ---------------- ----------------- --------------- ------------------ --------- ------------ ----- ------- ---- -- ---------------------------
以上代码中，我们使用了一个名为 corsOptions 的对象来配置 cors 中间件。我们允许来自 http://example.com 的跨域请求，允许使用 GET、POST 和 PUT 方法，允许 Content-Type 和 Authorization 请求头，允许客户端访问 Content-Length 和 X-Foo 响应头，允许发送身份凭证，并将预检请求的有效时间设置为 3600 秒。
示例代码
以下是一个完整的 Express.js 应用程序示例，其中包含了一个使用 cors 中间件的路由：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ----------- - - ------- --------------------- -------- ------- ------- ------- --------------- ---------------- ----------------- --------------- ------------------ --------- ------------ ----- ------- ---- -- --------------------------- ---------------- ----- ---- -- - ---------- -------- ------- ------- --- --- ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---
以上代码中，我们创建了一个 Express.js 应用程序，使用 cors 中间件允许跨域请求。我们还创建了一个路由，当客户端向 /data 发送 GET 请求时，返回一个 JSON 对象。
总结
本文介绍了如何使用 Express.js 框架处理 CORS 跨域请求。我们可以使用 cors 中间件来启用和配置 CORS，以允许跨域请求访问我们的服务器资源。希望本文对你有所帮助，祝你在前端开发中取得更多的成果！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e4ec311886fbafa40c3b0a