CORS（跨来源资源共享）是为了安全和隐私而设计的一种机制，用于限制通过 Web 应用程序访问另一个域上的资源。在 Express.js 应用程序中，开发人员可能会遇到 CORS 问题，例如在前端应用程序中访问具有不同源的 API，浏览器会阻止对其进行访问。本文介绍如何解决 Express.js 应用程序中的 CORS 问题。
什么是 CORS？
CORS 是一种用于 Web 应用程序的机制，用于在受信任的 Web 应用程序之间共享数据。它允许 Web 应用程序在另一个域上访问它的资源，但在某些情况下可能存在安全问题。浏览器是使用 CORS 来限制这种跨域资源共享，从而保护用户浏览安全和隐私。
如何解决 Express.js 应用程序中的 CORS 问题？
要解决在 Express.js 应用程序中的 CORS 问题，你需要设置正确的 HTTP 标头，以允许从不同的源头请求资源。跨域通信涉及到两个部分：客户端和服务器。客户端发送跨域请求，服务器需要设置 HTTP 响应头来允许跨域请求。
在 Express.js 应用程序中设置 CORS
在 Express.js 应用程序中，使用 cors 中间件来设置相关的 HTTP 响应头。你可以在应用程序中安装并使用 cors 中间件，如下所示：
npm install cors
在应用程序中引入 cors 中间件，并使用下面的语句：
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())在上面代码中，我们首先安装了 cors 模块，并在 Express.js 应用程序中引入该模块，最后我们将 cors 中间件添加到应用程序中。
使用配置选项来自定义 CORS 设置
cors 中间件有许多配置选项，我们可以使用它来自定义我们的 CORS 设置。如果我们想进一步设置响应头，请使用下面示例代码：
app.use(cors({
origin: 'http://example.com',
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}))在上面的代码中，我们通过提供原始来源网址来限制跨域请求，在上面的示例中它是 http://example.com。我们还设置了响应状态，以便旧式浏览器可以正常工作。
自定义 CORS 配置选项
如果您需要更多的定制来设置 CORS，您可以使用以下代码：
const corsOptions = {
origin: 'http://example.com',
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}
app.use(cors(corsOptions))在上面的代码中，我们将配置选项传递给 cors() 方法，并修改 corsOptions 中的原始来源和 HTTP 响应头设置。
示例代码
下面是一个示例代码，演示如何在 Express.js 应用程序中设置 CORS。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---- - --------------- ----- --- - --------- -- -------- --------------- -- --- ---- ---- ----- ----------- - - ------- --------------------- --------------------- --- -- ---- ------ -------- ------ ------- --------- ----- -- --- - -------------------------- -- --- --------- ------------ ----- ---- -- - --------------- -------- -- -- ---- ---------------- -- -- - -------------------- --- --------- -- ----------------------- --
总结
通过设置正确的 HTTP 响应头，您可以在 Express.js 应用程序中解决 CORS 问题，并允许从不同的来源请求资源。使用 cors 中间件和配置选项，您可以定制您的 CORS 设置，以满足您的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ac47e968c7c53b0a40cf0