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配置，结合代理方案优化安全性与性能。