在 Web 开发中，跨域请求是一个常见的问题。跨域请求指的是浏览器向服务端发起请求时，请求的域名与服务端的域名不同。在 Express.js 中可以使用 cors 中间件来处理跨域请求，本文将详细介绍如何使用 cors 中间件，包括跨域请求的来源、预请求和通过 cors 中间件处理跨域请求的步骤等。
跨域请求的来源
在介绍如何使用 cors 中间件处理跨域请求之前，先了解一下跨域请求的来源。跨域请求可能源自不同的域名、IP 地址和端口，以下是一些常见的跨域请求情况：
- 基于域名的跨域请求：如从
http://www.example.com向http://api.example.com发送请求。 - 基于IP 地址的跨域请求：如从
http://192.168.0.1向http://192.168.0.2发送请求。 - 基于端口的跨域请求：如从
http://localhost:3000向http://localhost:4000发送请求。
预检请求
在处理跨域请求时，浏览器会发送一个预检请求，用于确定是否可以安全地发生跨域请求。预检请求是一种 HTTP 请求，采用 OPTIONS 方法，用于查询服务器是否允许跨域请求。
以下是预检请求的一些特征：
- 请求头中包含一个
Origin字段，用于标识请求的来源。 - 请求头中包含一个
Access-Control-Request-Method字段，用于指定实际请求将使用的 HTTP 方法。 - 请求头中可能包含其他许多字段，用于表示实际请求中的其他信息，例如请求头的类型等。
当服务端返回 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 头时，预检请求成功。这两个头会告诉浏览器实际请求是否可以发生跨域，并指定了浏览器可以发送的 HTTP 方法。
处理跨域请求的步骤
在 Express.js 中使用 cors 中间件处理跨域请求步骤如下：
- 安装 cors 中间件
npm install cors
- 在 Express.js 应用程序中使用 cors 中间件
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())在 Express.js 中使用 cors 中间件非常简单，只需要在应用程序中使用 app.use(cors()) 即可。这样就可以接受来自任意域、任意 IP 地址和端口的跨域请求。
- 限制跨域请求
如果需要限制跨域请求，可以使用选项参数，例如：
app.use(cors({
origin: 'http://www.example.com',
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
allowedHeaders: ['Content-Type', 'Authorization'],
}))通过设置选项参数来限制跨域请求。
示例代码
下面是使用 cors 中间件处理跨域请求的完整示例代码：
-- -------------------- ---- -------
----- ------- - ------------------
----- ---- - ---------------
----- --- - ---------
---------------
--------------------- ----- ---- -- -
----- ----- - -
---- -- ----- -------
---- -- ----- ---------
-
---------------
--
----- ---- - ---------------- -- ----
---------------- -- -- ---------------------- -- ---- -------------这个示例代码设置了一个 GET 请求，用于获取用户列表。使用 app.use(cors()) 来处理跨域请求。具体代码实现可以参考以上步骤中的示例代码。
总结
本文介绍了使用 cors 中间件处理 Express.js 中的跨域请求的方法，包括跨域请求的来源、预请求以及通过 cors 中间件处理跨域请求的步骤等。在实际应用中，我们需要根据具体情况来调整 cors 中间件的选项参数，来限制跨域请求的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64759f3a968c7c53b02a260e