在 Express.js 中使用 CORS 解决跨域问题的完全指南

阅读时长 5 分钟读完

在前端开发中,经常会遇到跨域问题。跨域问题是由于浏览器的同源策略限制,导致在不同源的网页之间无法进行正常的通信。而在 Express.js 中,我们可以通过使用 CORS(跨域资源共享)来解决跨域问题。

什么是 CORS?

CORS 是一种跨域资源共享的技术。它允许浏览器向跨域服务器发出 XMLHttpRequest 请求,从而克服了同源策略的限制。

CORS 的实现是通过在响应头中添加一些特殊的字段来完成的。这些字段告诉浏览器,哪些请求是允许的,哪些请求是被禁止的。同时,CORS 还提供了一些安全措施,保护了客户端和服务器之间的通信。

如何在 Express.js 中使用 CORS?

在 Express.js 中使用 CORS 很简单,只需要安装 cors 模块并在代码中引入即可。

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

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

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

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

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

在上述代码中,我们首先引入了 cors 模块,然后在 app 上使用了 cors 中间件。这样,我们就可以在 Express.js 应用中使用 CORS 了。

CORS 配置选项

cors 中间件还提供了一些配置选项,可以根据需要进行配置。下面列举了一些常用的选项。

origin

origin 选项用于指定允许的来源。如果不指定此选项,则默认允许所有来源。

methods

methods 选项用于指定允许的 HTTP 方法。如果不指定此选项,则默认允许 GET、HEAD 和 POST 方法。

allowedHeaders

allowedHeaders 选项用于指定允许的请求头。如果不指定此选项,则默认允许以下请求头:AcceptAccept-LanguageContent-LanguageContent-TypeAuthorization

exposedHeaders

exposedHeaders 选项用于指定允许客户端访问的响应头。如果不指定此选项,则默认不允许客户端访问任何响应头。

credentials

credentials 选项用于指定是否允许发送身份凭证。如果不指定此选项,则默认不允许发送身份凭证。

maxAge

maxAge 选项用于指定预检请求的有效期,以秒为单位。如果不指定此选项,则默认不缓存预检请求的结果。

示例代码

下面是一个完整的示例代码,演示了如何在 Express.js 中使用 CORS。

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

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

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

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

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

在上述代码中,我们首先引入了 expresscors 模块,然后创建了一个 Express.js 应用,并在应用中使用了 cors 中间件。最后,我们定义了一个路由,返回了一个简单的字符串。

总结

CORS 是一种跨域资源共享的技术,可以克服浏览器同源策略的限制。在 Express.js 中使用 CORS 非常简单,只需要安装 cors 模块并在代码中引入即可。同时,cors 中间件还提供了一些配置选项,可以根据需要进行配置。

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

纠错
反馈