1. 注意

• 服務(wù)端口不能與代理端口一致 端口會沖突
• 服務(wù)本身做了跨域處理 nginx 就不用在處理跨域了

2. CORS

什么是CORS ? CORS是一個W3C的標(biāo)準(zhǔn),全稱是跨域資源共享(Cross-origin resource sharing). 他允許瀏覽器向跨源服務(wù)器,發(fā)出XMLHttpRequest請求,從而客服了AJAX只能同源使用的限制.
當(dāng)前幾乎所有的瀏覽器都可以通過CORS的協(xié)議支持AJAX跨域調(diào)用.
簡單來說就是跨域的目標(biāo)服務(wù)器要返回的一系列的Headers,通過這些Headers來通知是否同意跨域.

3. Nginx通過CROS 實現(xiàn)跨域

#設(shè)置Origin:表示服務(wù)器可以接受的請求 * 代表所有請求
add_header Access-Control-Allow-Origin 
#設(shè)置跨域請求是否允許發(fā)送Cookie,true 支持 false不支持
add_header Access-Control-Allow-Credentials
#設(shè)置跨域支持的請求類型 GET,POST,PUT,DELETE,OPTIONS
add_header Access-Control-Allow-Methods 
#設(shè)置跨域請求允許的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;

        #設(shè)置變量 $cors_origin
        set $cors_origin "";
        #請求地址匹配格式  用來控制http請求地址 設(shè)置跨域白名單
        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;

        #設(shè)置變量 $cors_origin
        set $cors_origin "";
        #請求地址匹配格式  用來控制http請求地址 設(shè)置跨域白名單
        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;
        }

    }