Express.js 中如何加入 CORS 支持,跨域处理

阅读时长 3 分钟读完

背景介绍

在 Web 应用程序中,跨域资源共享(CORS)是一种机制,它允许 Web 应用程序从不同的域访问其资源。这在前端开发中非常常见,例如在开发 Web 应用程序时,您可能需要从一个域获取数据,而将其显示在另一个域上。但是,由于浏览器的同源策略限制,这种跨域请求是不被允许的。

在这种情况下,我们需要使用 CORS(跨域资源共享)机制来允许跨域请求。本文将介绍如何在 Express.js 中添加 CORS 支持,以及如何处理跨域请求。

如何加入 CORS 支持

在 Express.js 中,我们可以使用 cors 中间件来添加 CORS 支持。cors 中间件是一个 Node.js 包,它可以自动处理 CORS 请求,并使其在 Express 应用程序中非常容易使用。

以下是如何在 Express.js 中使用 cors 中间件:

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

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

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

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

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

如上所示,我们只需要在应用程序中使用 app.use(cors()) 就可以自动添加 CORS 支持,这样我们就可以处理来自其他域的请求了。

如何处理跨域请求

在 Express.js 中,我们可以使用 res.header() 方法来设置响应头,从而处理跨域请求。以下是如何在 Express.js 中处理跨域请求的示例代码:

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

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

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

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

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

如上所示,我们使用 res.header() 方法设置了 Access-Control-Allow-OriginAccess-Control-Allow-Headers 响应头,这样我们就可以处理跨域请求了。

总结

在本文中,我们介绍了如何在 Express.js 中添加 CORS 支持,并处理跨域请求。我们使用 cors 中间件来添加 CORS 支持,并使用 res.header() 方法来设置响应头,从而处理跨域请求。希望本文对您有所帮助。

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

纠错
反馈