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

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 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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值