什么是 CORS
CORS（Cross-Origin Resource Sharing）是一种浏览器安全策略，用于限制网页或 Web 应用程序的跨源 HTTP 请求。简单来说，当你在一个网站上请求另一个域的资源时，浏览器会默认阻止这个请求，这就是跨域问题。
CORS 跨域问题的解决方案
在 Express.js 中，我们可以通过设置响应头来解决 CORS 跨域问题。
设置响应头
在 Express.js 中，我们可以通过设置响应头来允许跨域请求。在响应头中设置 Access-Control-Allow-Origin 字段，该字段的值为允许跨域请求的源，可以是单个域名、多个域名或 *（表示所有域名都允许跨域请求）。
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});支持跨域请求的方法
除了设置响应头以外，我们还需要设置支持跨域请求的方法，包括 GET、POST、PUT、DELETE 等。在响应头中设置 Access-Control-Allow-Methods 字段，该字段的值为支持跨域请求的方法。
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
next();
});支持跨域请求的请求头
有些请求需要在请求头中添加一些自定义字段，例如 token 等。在响应头中设置 Access-Control-Allow-Headers 字段，该字段的值为支持跨域请求的请求头。
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});支持跨域请求的凭证
有些请求需要在请求头中携带凭证信息，例如 cookie 等。在响应头中设置 Access-Control-Allow-Credentials 字段，该字段的值为 true。
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});示例代码
以下是一个使用 Express.js 解决 CORS 跨域问题的示例代码：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello, world!' });
});
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});在浏览器中访问 http://localhost:3000/api/data，你应该能够得到一个 JSON 格式的响应，其中包含一个 message 属性，值为 Hello, world!。
总结
CORS 跨域问题是前端开发中常见的问题，解决起来也比较简单。在 Express.js 中，我们只需要设置响应头来允许跨域请求，同时设置支持跨域请求的方法、请求头和凭证即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6509941995b1f8cacd444aa6