Nginx反向代理 跨域问题

1.背景

H5项目部署在自己服务器上，后端数据调用第三方。第三方不愿意解决跨域问题

• 1.H5项目部署在a.com
• 2.H5项目的所有接口请求由第三方的c.com改为b.com。
• 3.反向代理用b.com,由b.com把所有请求转发请求第三方的c.com。加上跨域请求头

2.Nginx配置

server
{
    listen 80;
    server_name b.com;
    index index.php index.html index.htm default.php default.htm default.html;
    location / {
      if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $http_origin;
         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
         add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
         add_header 'Access-Control-Max-Age' 86400;
        
      }
  		root   html;
  		index  index.html index.htm;
  		proxy_pass  http://c.com/;
  	}
}

3.常见问题

• 1.vue本地开发有代理的问题，如果路径不一致。打包后现在也会出现接口不能正常访问。关闭本地代理即可
• 2.Access-Control-Allow-Origin的值用 $http_origin，用*出现一些未知问题。
• 3.if ($request_method = 'OPTIONS') 一定要加