在前端开发中，很常见的一个问题就是跨域请求。当我们在本地开发或测试时，所有请求都可以正常响应，但一旦将代码部署到线上环境时，就会遇到跨域请求的问题。这时候，我们就需要了解如何在 Express.js 中解决 CORS 问题。
什么是 CORS
CORS（Cross-Origin Resource Sharing）是一种机制，它允许浏览器向不同域名的服务器发送 AJAX 请求。在默认情况下，浏览器只允许与同一域名下的服务器进行数据交互，这是为了保证网页的安全性。但是，现实中我们经常需要与不同域名下的服务器通信，所以 CORS 机制就被提出来了。
Express.js 中的 CORS
在 Express.js 中，我们可以通过安装 cors 这个插件来解决 CORS 问题。它提供了一个中间件函数来处理跨域请求。
安装
npm install cors
使用
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
// 路由代码配置
cors() 函数可以传递配置对象以自定义行为。以下是一些示例配置：
- origin：配置哪些域名可以访问本站资源。可以是字符串、正则表达式、函数等。
- methods：配置允许的 HTTP 请求方法。
- preflightContinue：布尔值，表示是否继续处理 preflight 请求。
- optionsSuccessStatus：可选的，表示对于 OPTIONS 请求的响应应该是什么 HTTP 状态码。
下面是示例配置：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---- - --------------- ----- --- - --------- ----- ----------- - - ------- --------------------- -- -- ----------- -- -------- -------- ------ ------- -- ----- ---- -- ------------------ ------ -- ---- --------- -- --------------------- ---- -- -- ---- ---- --- - -------------------------- -- ----
跨域请求示例
假设本地开发环境是 http://localhost:3000，我们需要向另一个域名的服务器发送 AJAX 请求。代码示例如下：
-- -------------------- ---- -------
--------
---- --------------------------
----- ------
-------- -------------- -
-------------------- -----
--
------ ------------- ----------- ------------ -
-------------------- ------------
-
--对于上述代码，默认情况下会报跨域错误。在 Express.js 中，我们通过使用 cors 中间件来解决这个问题。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---- - --------------- ----- --- - --------- --------------- ---------------- ----- ---- -- - ---------- ----- -------- ---- -- -- -- ---------------- -- -- - ------------------- ------- -- ----------------------- --
在上述代码中，我们使用了 cors 中间件允许跨域请求，并在路由代码中添加了一个 GET 请求。此时，我们可以通过上述 AJAX 请求向 http://example.com/data 发送请求并得到响应数据。
总结
通过本文，我们了解了什么是 CORS，以及如何在 Express.js 中使用 cors 中间件来解决跨域请求的问题。希望这篇文章对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5d49095c405902ee375b2