CORS（Cross-Origin Resource Sharing）是一个 Web 应用程序中经常遇到的跨域问题，当你使用 Ajax 或 Fetch API 请求来自不同域的资源时，服务器会拒绝这些请求。因此，需要使用 CORS 来允许来自不同源的请求。
在本文中，我们将了解如何在 Express.js 中使用 CORS，同时提供一些示例代码以进行实际演示。
什么是 CORS？
CORS 是一种机制，它使用额外的 HTTP 头来告诉浏览器，当前请求的资源可以被哪些来源访问。当浏览器发起跨域请求时，服务器会检查请求头中的 Origin 字段，然后判断请求是否允许访问。如果不允许，则拒绝该请求，并且浏览器会抛出一个错误。
使用 CORS 有几种方法可以解决跨域请求问题。在 Express.js 中，我们可以使用 cors 中间件来处理跨域请求。该中间件将添加 CORS 头并自动设置适当的响应代码。
基本使用方法
首先，我们需要安装 cors 模块，可以通过 npm 或 yarn 安装：
npm install cors # or yarn add cors
在 Express.js 应用程序中添加中间件：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());这将默认允许所有来源的请求，且仅支持 GET、POST、HEAD 请求方法。如果需要添加其他请求方法，可以在配置中传递 methods 选项：
app.use(cors({
methods: ['GET', 'POST', 'PUT', 'DELETE'],
}));配置选项
除了 methods 选项外，还有其他几个选项可用于定制 cors 中间件的行为。下面是一些常见的选项：
origin：允许的来源。credentials：设置是否启用身份验证凭据。exposedHeaders：设置响应头中公开的头列表。allowedHeaders：设置请求头中允许的头列表。
例如，以下示例代码将允许来自 https://example.com 和 https://www.example.com 的请求，并启用身份验证凭据：
app.use(cors({
origin: [
'https://example.com',
'https://www.example.com',
],
credentials: true,
}));示例代码
以下示例代码演示如何使用 cors 中间件处理跨域请求。为了方便起见，我们将使用 Express.js 提供的内置路由组件。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----------------
------------ ----- ---- -- -
--------------- ---------
---
-------------------- ----- ---- -- -
----- ---- - -
----- ----- -----
---- ---
--
---------------
---
---------------- -- -- -
------------------- ------- -- ---- -------
---在浏览器中访问 http://localhost:3000，你应该可以看到 'Hello World!' 的消息。然后访问 http://localhost:3000/api/data，你应该可以看到一个 JSON 对象。
总结
在 Express.js 中使用 CORS 中间件可以轻松地解决跨域请求问题。本文讨论了如何使用 cors 中间件以及如何理解 CORS 的工作原理，同时提供了示例代码来演示其实际应用。使用 CORS 中间件可以避免许多跨域请求问题，同时也提供了额外的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b62aceadd4f0e0ffedbc2c