在使用 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