解决使用 Express.js 时遇到的 CORS 跨域请求问题

阅读时长 4 分钟读完

什么是 CORS 跨域请求问题?

CORS(Cross-Origin Resource Sharing)是一种安全机制,用于防止网站从多个源点进行攻击。浏览器遵循同源策略,即浏览器只允许与同源的服务器进行交互。同源是指协议、主机名和端口号都相同。

如果我们的前端应用在与其他域的服务器交互时受到限制,就会出现 CORS 跨域请求问题。

解决方案

方法一: 设置 Access-Control-Allow-Origin

在 Express.js 的路由中,我们可以使用以下代码来设置 Access-Control-Allow-Origin:

这样就可以允许任何来源的请求,但是并不安全。因为我们可以简单地伪造来源并恶意攻击服务器。

方法二: 验证请求来源

可以通过验证请求来源来避免安全问题。我们可以添加以下代码:

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

其中,whitelist 是一个数组,包含允许的来源列表。在验证通过后,就可以设置 Access-Control-Allow-Origin 来允许请求。

方法三: 使用 CORS 中间件

CORS 中间件可以方便地解决跨域问题。我们可以使用 cors 模块来实现。

安装 cors 模块:

在 Express.js 的路由中,我们可以使用以下代码来使用 CORS 中间件:

这里的 cors() 函数可以接受一个对象参数用于自定义设置。

示例代码

下面给出一个示例代码:

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

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

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

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

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

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

在示例代码中,我们使用了方法二和方法三来解决跨域请求问题,并且将数据通过 JSON 格式返回给客户端。客户端通过访问 http://localhost:3000/data 来获取数据。

总结

CORS 跨域请求问题是一个常见的前端开发问题,但是通过使用 CORS 中间件或者验证请求来源等方法可以很方便地解决问题。在设置时需要注意安全性问题,以避免不必要的安全风险。

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

纠错
反馈