在使用 Express.js 开发前端应用时，我们经常需要与后端 API 进行数据交互。但在实际应用中，我们往往会面临跨域访问的问题。这时候，我们就需要使用跨域资源共享（CORS）来解决这个问题。但是，在实际开发中，CORS 问题也常常被忽略，导致一些不必要的错误出现。因此，本文将重点介绍 Express.js 中的 CORS 问题及其修复技巧。
CORS 是什么
CORS，全称 Cross-Origin Resource Sharing，是一种用于解决跨域资源访问的标准。在 Web 应用中，不同域名的网页需要访问彼此的资源（如：图片、视频、JS 脚本等），但是，由于安全原因，浏览器禁止此行为。因此，CORS 就是通过添加特定的 HTTP 头来告诉浏览器，允许访问其他域名的资源。
Express.js 中的 CORS 问题
在 Express.js 中，处理 CORS 问题非常简单，只需要使用一个中间件 cors 即可。例如：
const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors());
这段代码就已经将 CORS 问题处理掉了。
但是，我们需要注意一些细节问题。
首先，如果我们想允许某个特定的域名访问我们的 API，可以在 cors 中配置：
-- -------------------- ---- ------- ----- --------- - -------------------------- ----- ----------- - - ------- -------- -------- --------- - -- -------------------------- --- --- - -------------- ----- - ---- - ------------ ---------- ------- -- ------- - - -- ---------------------------展开代码
这段代码允许了 http://localhost:4200 的域名访问我们的 API，其他域名将被拒绝。
其次，需要注意的是，如果我们使用了某些 HTTP 方法（如 DELETE、PUT、PATCH 等），那么浏览器会发送OPTIONS请求，这是一种预请求，用于确认服务器是否允许跨域访问。因此，我们需要按照以下方式进行设置：
app.options('/api/:id', cors()); app.delete('/api/:id', cors(), function(req, res, next) { // ... });
这段代码设置了一个 OPTIONS 请求，然后才是 DELETE 请求，这样就能顺利的进行 CORS 了。
示例代码
为了更好的理解 CORS 问题，我们来看一个示例代码，该示例中，前端代码使用 Angular，后端使用 Express.js，前端页面需要获取后端数据，而后端数据存储在 MongoDB 中。我们需要解决前端访问后端数据的 CORS 问题。
前端代码：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ---------- - ---- ----------------------- ------------- ----------- ------ -- ------ ----- ----------- - ------------------- ----- ----------- - - --------- - ------ ------------------------------------------------ - -展开代码
后端代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----- -------- - -------------------- ----- ---- - ------------------------- -------------------------------------------------- - ---------------- ----- ------------------- ---- -- --- -- - -- ----- - ----------------------- - ---- - ----------------------- - --- ---------------- -------------------- ----- ----- ---- -- - ----- ---- - ----- ------------ --------------- --- ---------------- -- -- - ---------------------- ---展开代码
以上示例代码中的 Cors 已经配置好，可以直接运行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c12a4d314edc26848c40c2
