1. 注意

• 服务端口不能与代理端口一致 端口会冲突
• 服务本身做了跨域处理 nginx 就不用在处理跨域了

2. CORS

什么是CORS ? CORS是一个W3C的标准,全称是跨域资源共享(Cross-origin resource sharing). 他允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而客服了AJAX只能同源使用的限制.
当前几乎所有的浏览器都可以通过CORS的协议支持AJAX跨域调用.
简单来说就是跨域的目标服务器要返回的一系列的Headers,通过这些Headers来通知是否同意跨域.

3. Nginx通过CROS 实现跨域

#设置Origin:表示服务器可以接受的请求 * 代表所有请求
add_header Access-Control-Allow-Origin 
#设置跨域请求是否允许发送Cookie,true 支持 false不支持
add_header Access-Control-Allow-Credentials
#设置跨域支持的请求类型 GET,POST,PUT,DELETE,OPTIONS
add_header Access-Control-Allow-Methods 
#设置跨域请求允许的Headers  头信息字段,以逗号分割的字符串
add_header Access-Control-Allow-Headers  

4. 配置信息 nginx.conf 中

• 任意跨源请求都支持

任意跨源请求都支持
 server {
        listen      8080;
        server_name  localhost;
        
        #*星号代表任意跨源请求都支持
        add_header Access-Control-Allow-Origin '*';  
        add_header Access-Control-Allow-Credentials "true";
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers  'token,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,XRequested-With';
        if ($request_method = 'OPTIONS') {
            return 200;
        }
    
    location /appmains {
            proxy_pass http://appmainsserver;
        }

    }

• 多个请求地址白名单配置

多个请求地址白名单配置
server {
        listen      8080;
        server_name  localhost;

        #设置变量 $cors_origin
        set $cors_origin "";
        #请求地址匹配格式  用来控制http请求地址 设置跨域白名单
        if ($http_origin ~ "https:www.baidu.com") {
            set $cors_origin $http_origin;              
        }   
        if ($http_origin ~ "www.test.com") {
            set $cors_origin $http_origin;              
        }
        if ($http_origin ~ "www.test1.com") {
            set $cors_origin $http_origin;              
        }       
        add_header Access-Control-Allow-Origin '$cors_origin';  
        add_header Access-Control-Allow-Credentials "true";
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers  'token,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,XRequested-With';
        if ($request_method = 'OPTIONS') {
            return 200;
        }
    
    location /appmains {
            proxy_pass http://appmainsserver;
        }

    }

• 指定格式的请求地址跨域

指定格式的请求地址跨域
 server {
        listen      8080;
        server_name  localhost;

        #设置变量 $cors_origin
        set $cors_origin "";
        #请求地址匹配格式  用来控制http请求地址 设置跨域白名单
        if ($http_origin ~ "http://(.*).baidu.com$") {
            set $cors_origin $http_origin;              
        }   

        add_header Access-Control-Allow-Origin '$cors_origin';  
        add_header Access-Control-Allow-Credentials "true";
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers  'token,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,XRequested-With';
        if ($request_method = 'OPTIONS') {
            return 200;
        }
    
    location /appmains {
            proxy_pass http://appmainsserver;
        }

    }