如何解决跨域请求的问题（CORS）？

文章目录

引言
理解 CORS
2.1 CORS 基本概念
2.2 同源策略与跨域分类
CORS 的核心机制
3.1 预检请求（Preflight Request）
3.2 简单请求
服务器端配置 CORS
4.1 关键响应头
4.2 Node.js (Express) 示例
4.3 其他后端语言配置
前端处理 CORS 请求
5.1 XMLHttpRequest 与 Fetch API
XMLHttpRequest 示例
Fetch API 示例
5.2 使用第三方库（axios）
预检请求与非简单请求详解
6.1 预检请求的必要性
6.2 如何优化预检请求
调试与常见问题
7.1 浏览器调试工具
7.2 常见错误
7.3 调试技巧
性能与安全注意事项
8.1 性能优化
8.2 安全考量
总结
引言
在前后端分离的开发模式中，跨域请求问题是常见的挑战。浏览器的同源策略限制了不同域、协议或端口之间的 AJAX 调用，防止恶意脚本获取敏感信息。但随着应用的复杂化，前端常需要调用第三方接口或分离静态资源，此时就必须通过合理的跨域解决方案来实现数据交互。跨域资源共享（CORS）正是为此而设计的安全机制，它允许服务器在响应中指定哪些来源可以访问资源，从而安全地打破同源限制。
理解 CORS
2.1 CORS 基本概念
CORS（Cross-Origin Resource Sharing）是一种 W3C 标准，允许浏览器在发起跨域 AJAX 请求时，依据服务器返回的 HTTP 头部判断是否允许跨域访问。它使得前端使用常规的 XMLHttpRequest 或 Fetch API 调用不同域的接口时不再受同源策略的严格限制。

2.2 同源策略与跨域分类
同源策略要求请求的协议、域名和端口都必须一致。只要任意一项不同，浏览器就会认为是跨域。跨域请求大致可分为：

简单请求：满足 GET、HEAD、POST（仅限特定 Content-Type）条件的请求，无需预检。
非简单请求：如 PUT、DELETE 或带自定义头部的请求，浏览器会先发送预检（OPTIONS）请求，确认服务器是否允许跨域操作。

CORS 的核心机制
3.1 预检请求（Preflight Request）
对于非简单请求，浏览器会在正式请求前先发送一个预检请求：

请求方法：OPTIONS
关键头部：
Origin：标识请求来源。
Access-Control-Request-Method：告知服务器即将使用的实际 HTTP 方法。
Access-Control-Request-Headers：列出将要发送的自定义头部字段。
服务器响应预检请求时，会返回：

Access-Control-Allow-Origin：允许访问的来源。
Access-Control-Allow-Methods：允许的请求方法列表。
Access-Control-Allow-Headers：允许的请求头部字段。
Access-Control-Max-Age：预检请求结果的缓存时间，减少重复预检请求的频率。
3.2 简单请求
对于 GET、HEAD 和某些 POST 请求，浏览器直接附加 Origin 头发送请求，服务器在响应中添加 CORS 相关字段即可，无需预检。

服务器端配置 CORS
4.1 关键响应头
服务器需要在响应头中添加以下字段：

Access-Control-Allow-Origin
指定允许跨域访问的域名，可设置为特定域（如 http://localhost:3000）或 *（不适用于带 Cookie 的请求）。
Access-Control-Allow-Methods
列出允许的 HTTP 方法，如 GET、POST、PUT、DELETE、OPTIONS 等。
Access-Control-Allow-Headers
列出允许的自定义请求头（如 Content-Type, Authorization, X-Requested-With）。
Access-Control-Allow-Credentials
指定是否允许跨域请求携带 Cookie，设为 true 时前端必须设置 withCredentials 为 true。
Access-Control-Max-Age
指定预检请求的结果缓存时间（单位为秒）。
4.2 Node.js (Express) 示例
const express = require('express');
const app = express();

const allowedOrigins = ['http://localhost:3000', 'http://127.0.0.1:5500'];

app.use((req, res, next) => {
const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {

// 设置允许的来源
res.setHeader('Access-Control-Allow-Origin', origin);
// 允许携带 Cookie
res.setHeader('Access-Control-Allow-Credentials', 'true');
// 允许的请求方法
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
// 允许的请求头
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
// 预检请求结果缓存时间，单位秒
res.setHeader('Access-Control-Max-Age', '86400');

}
// 预检请求直接返回
if (req.method === 'OPTIONS') {

return res.sendStatus(200);

}
next();
});

app.get('/api/data', (req, res) => {
res.json({ message: '跨域请求成功！' });
});

app.listen(8000, () => {
console.log('Server is running on port 8000');
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
4.3 其他后端语言配置
Java（Spring Boot）：可使用 @CrossOrigin 注解或配置过滤器设置响应头。
PHP：在脚本开头添加：
header("Access-Control-Allow-Origin: http://localhost:3000");
header("Access-Control-Allow-Credentials: true");
1
2
Apache/Nginx：通过配置文件添加 Header set Access-Control-Allow-Origin "http://localhost:3000" 等指令。

前端处理 CORS 请求
5.1 XMLHttpRequest 与 Fetch API
在前端使用原生 AJAX 或 Fetch 进行请求时，可以设置 withCredentials 参数来决定是否携带 Cookie。

XMLHttpRequest 示例
const xhr = new XMLHttpRequest();
xhr.withCredentials = true; // 携带 Cookie
xhr.open('GET', 'http://localhost:8000/api/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {

console.log('响应数据：', JSON.parse(xhr.responseText));

}
};
xhr.send();
1
2
3
4
5
6
7
8
9
Fetch API 示例
fetch('http://localhost:8000/api/data', {
method: 'GET',
credentials: 'include' // 携带 Cookie
})
.then(response => response.json())
.then(data => {
console.log('响应数据：', data);
})
.catch(error => console.error('请求失败：', error));
1
2
3
4
5
6
7
8
9
5.2 使用第三方库（axios）
在 axios 中，全局设置 withCredentials 选项即可：

import axios from 'axios';

axios.defaults.withCredentials = true;

axios.get('http://localhost:8000/api/data')
.then(response => {

console.log('响应数据：', response.data);

})
.catch(error => {

console.error('请求失败：', error);

});
1
2
3
4
5
6
7
8
9
10
11

预检请求与非简单请求详解
6.1 预检请求的必要性
对于非简单请求（例如 PUT、DELETE 或使用 JSON 格式发送数据的 POST 请求），浏览器在发送实际请求前会先发送一个 OPTIONS 请求，称为预检请求。这一步骤用于验证：

请求方法是否被允许。
自定义头部是否被允许。
是否允许携带凭证（Cookie）。
6.2 如何优化预检请求
缓存预检结果：通过设置 Access-Control-Max-Age，可以让浏览器缓存预检结果，从而减少后续的预检请求次数，提升性能。
精简请求头：尽可能减少自定义请求头，确保请求被归为“简单请求”类别，避免额外的预检流程。

如何解决跨域请求的问题（CORS）？

唠叨的甘蔗

引用和评论

教你用 Python 玩 GPT 接口做一个对话机器人

Vue.js-Vue实例

Flex 布局学习总结（对齐方式）

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

JavaScript&ES6----数组去重的多种方法

Base64编码的“暗坑”：解密失败？可能是这些原因！

从 DeepSeek 看25年前端的一个小趋势