CORS（跨来源资源共享）是解决跨域请求的核心方案，其实现需结合服务器端配置、前端协作及特定场景的优化策略。以下是主流CORS跨域方案的综合梳理：
一、服务器端配置CORS响应头
这是最核心的解决方案，通过服务器返回特定HTTP头告知浏览器允许跨域访问：
1. 基础头配置
o
Access-Control-Allow-Origin: 指定允许跨域的域名（如http://example.com），或使用*允许所有域名（但不可与凭证类头共存）。
o
Access-Control-Allow-Methods: 定义允许的HTTP方法（如GET, POST, PUT）。
o
Access-Control-Allow-Headers: 声明允许的自定义请求头（如Authorization, Content-Type）。
2. 预检请求处理
对非简单请求（如含自定义头或PUT/DELETE方法），浏览器会先发送OPTIONS预检请求。服务器需响应以下头：
o Access-Control-Max-Age: 预检结果缓存时间（单位秒）。
o 返回204状态码并终止后续处理（针对OPTIONS请求）。
3. 凭证与安全配置
o
Access-Control-Allow-Credentials: true：允许携带Cookie或认证信息。
o Vary: Origin：避免缓存导致不同源请求的响应头冲突。
实现示例：
o Node.js/Express：使用cors中间件一键配置。
o Nginx：通过add_header指令动态设置响应头。
o Spring Boot：注解@CrossOrigin或全局配置类。
二、代理服务器方案
通过代理中转请求，规避浏览器同源策略：
1. 反向代理（如Nginx）
将前端请求代理到同源域名下，后端实际处理跨域：
location /api/ {
proxy_pass http://backend-server;
add_header '
Access-Control-Allow-Origin' '*' always; # 可选二次加固
}
2. 开发环境代理
前端框架（如Vue/React）通过webpack-dev-server或http-proxy-middleware实现本地代理。
三、特定场景的替代方案
1. JSONP（仅限GET请求）
动态创建<script>标签加载数据，需服务端返回回调函数包裹的JSON数据。适用于老旧浏览器，但存在XSS风险。
2. WebSocket
全双工通信协议不受同源策略限制，适用于实时数据传输场景。
四、安全与性能优化建议
1. 避免全开放策略
Access-Control-Allow-Origin: *应谨慎使用，优先限定具体域名。
2. 减少预检请求开销
合理设置Access-Control-Max-Age（如1728000秒=20天），缓存预检结果。
3. 防御CSRF攻击
即使启用CORS，仍需配合Token验证、SameSite Cookie等机制。
五、常见框架配置示例
框架/工具配置方式
Expressapp.use(cors({ origin: 'http://example.com', methods: ['GET','POST']}))
Spring Boot@CrossOrigin(origins = "*")或全局CorsRegistry配置
Nginx动态映射允许的域名，处理OPTIONS请求
Gin（Go）中间件设置响应头
通过合理选择上述方案，可覆盖从简单静态资源到复杂REST API的跨域需求。建议优先采用服务器端CORS配置，结合代理方案优化安全性与性能。