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

*郑*2025-05-15 8:06

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

- [1. 环境](#1. 环境)
- [2. 配置Nginx反向代理和CORS](#2. 配置Nginx反向代理和CORS)
- - 添加的响应头包括：

1. 环境

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

2. 配置Nginx反向代理和CORS

shell 复制代码

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 request
	    if ( $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）