解决跨域的4种方法

00_跨域的概念

浏览器只允许请问具有相同的协议，域名，端口，进行请求，有一个不同，就会拒绝。 

 01.前后端协商jsonp

    //jsonp//jsonp 是 json with padding 的缩写，是一种通过 <script> 标签的 src 属性来实现跨域请求的技术。//jsonp 的原理是利用 <script> 标签的 src 属性可以加载外部资源，并且不受同源策略的限制，//所以可以通过 <script> 标签的 src 属性来加载外部资源，实从而现跨域请求。//jsonp 的缺点是只能发送 get 请求，不能发送 post 请求。//jsonp 的优点是简单易用，不需要服务器端的支持，只需要在客户端实现即可。只能发送get请求

后端

 

前端

（通过挂载全局函数解决）

 02_前端解决，使用代理dev

直接请求，有跨域问题

 

解决方案：使用打包构建工具：vite或者webpack解决

 

import { defineConfig } from 'vite';export default defineConfig({server: {proxy: {// 将 /api 开头的请求代理到 Node.js 服务器'/api': {target: 'http://localhost:3000',changeOrigin: true}}}
});

 

03.后端解决，设置请求头 

直接在接口处使用cors插件也行，设置请求头允许所有源访问。

前端

后端

 

nginx反向代理配置

将前端请求代理到后端API，例如：

nginx

server {listen 80;server_name localhost;location /api {proxy_pass http://api.example.com;}
}

2. 添加跨域响应头

在代理配置中设置CORS相关头信息：

nginx

location /api {proxy_pass http://api.example.com;# 允许的请求来源（替换为你的前端域名）add_header 'Access-Control-Allow-Origin' 'http://localhost:8080' always;# 允许的HTTP方法add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;# 允许的请求头add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;# 允许携带凭证（如cookies）add_header 'Access-Control-Allow-Credentials' 'true' always;
}

• always 参数确保即使后端返回4xx/5xx错误，头信息仍被添加。

3. 处理OPTIONS预检请求

针对OPTIONS方法单独处理，直接响应无需转发到后端：

nginxlocation /api {if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';add_header 'Access-Control-Max-Age' 1728000;  # 缓存预检结果20天（秒）add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}proxy_pass http://api.example.com;# ... 其他头配置同上
}

4. 动态允许多域名（可选）

使用map模块动态匹配允许的域名：

nginx

map $http_origin $cors_origin {default "";~^https?://(localhost:8080|example\.com|app\.example\.net)$ $http_origin;
}server {...location /api {if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' $cors_origin;...return 204;}proxy_pass http://api.example.com;add_header 'Access-Control-Allow-Origin' $cors_origin always;...}
}

5. 完整配置示例

nginx

http {map $http_origin $cors_origin {default "";~^https?://(localhost:8080|example\.com)$ $http_origin;}server {listen 80;server_name localhost;location /api {if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' $cors_origin;add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}proxy_pass http://api.example.com;add_header 'Access-Control-Allow-Origin' $cors_origin always;add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;add_header 'Access-Control-Allow-Credentials' 'true' always;}}
}

6. 关键注意事项

• 安全性：避免使用*作为Access-Control-Allow-Origin的值，明确指定可信域名。

• 凭证携带：若前端需要发送Cookies，设置Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能为*。

• 缓存预检：合理设置Access-Control-Max-Age减少OPTIONS请求次数。

• 测试验证：使用浏览器开发者工具或curl检查响应头是否包含CORS头信息。

验证命令示例

curl -I -X OPTIONS http://nginx-server/api
# 检查返回头中是否包含CORS相关字段

 更详细的可以访问：nginx跨域解决