一个经常被忽视的问题:Express.js 中的跨域资源共享(CORS)问题修复技巧

阅读时长 4 分钟读完

在使用 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 即可。例如:

这段代码就已经将 CORS 问题处理掉了。

但是,我们需要注意一些细节问题。

首先,如果我们想允许某个特定的域名访问我们的 API,可以在 cors 中配置:

-- -------------------- ---- -------
----- --------- - --------------------------
----- ----------- - -
  ------- -------- -------- --------- -
    -- -------------------------- --- --- -
      -------------- -----
    - ---- -
      ------------ ---------- ------- -- -------
    -
  -
--

---------------------------
展开代码

这段代码允许了 http://localhost:4200 的域名访问我们的 API,其他域名将被拒绝。

其次,需要注意的是,如果我们使用了某些 HTTP 方法(如 DELETE、PUT、PATCH 等),那么浏览器会发送OPTIONS请求,这是一种预请求,用于确认服务器是否允许跨域访问。因此,我们需要按照以下方式进行设置:

这段代码设置了一个 OPTIONS 请求,然后才是 DELETE 请求,这样就能顺利的进行 CORS 了。

示例代码

为了更好的理解 CORS 问题,我们来看一个示例代码,该示例中,前端代码使用 Angular,后端使用 Express.js,前端页面需要获取后端数据,而后端数据存储在 MongoDB 中。我们需要解决前端访问后端数据的 CORS 问题。

前端代码:

-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------

-------------
  ----------- ------
--
------ ----- ----------- -

  ------------------- ----- ----------- - -

  --------- -
    ------ ------------------------------------------------
  -
-
展开代码

后端代码:

-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----- -------- - --------------------
----- ---- - -------------------------

-------------------------------------------------- -
  ---------------- -----
  ------------------- ----
-- --- -- -
  -- ----- -
    -----------------------
  - ---- -
    -----------------------
  -
---

----------------

-------------------- ----- ----- ---- -- -
  ----- ---- - ----- ------------
  ---------------
---

---------------- -- -- -
  ----------------------
---
展开代码

以上示例代码中的 Cors 已经配置好,可以直接运行测试。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c12a4d314edc26848c40c2

纠错
反馈

纠错反馈