nginx配置反向代理支持CORS跨域请求

1. 环境

• 后端springboot,项目端口8080
• 前端vue,项目端口8088

2. 配置Nginx反向代理和CORS

server {listen 8088;server_name your_domain.com;location / {root /path/to/your/vue/dist/;  # 静态资源目录try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://localhost:8080;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;#CORS 配置add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';#是否允许cookie传输add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';#针对浏览器的options预请求直接返回200，否则会被403 forbidden--invalie CORS requestif ( $request_method = 'OPTIONS' ) { return 200;} }# 其他 location 块或配置保持不变
}

添加的响应头包括：

Access-Control-Allow-Origin：允许的来源域名，这里设置为 * 表示允许所有来源。
Access-Control-Allow-Methods：允许的 HTTP 方法，如 GET, POST, PUT, DELETE, OPTIONS。
Access-Control-Allow-Headers：允许的请求头字段。
Access-Control-Allow-Credentials：是否允许携带凭据（如 Cookie）