nginx 指定多個域名跨域請求配置

時間 2019-11-08

標籤 nginx 指定多個域名請求配置欄目 Nginx 简体版

原文原文鏈接

引子

通常來講，經過js請求非本站網址的地址會提示跨域問題，以下內容： Failed to load http://www.xxxx.com/xxxx: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.200' is therefore not allowed access.nginx

從客戶端的角度來講，你們基本上都是用 jsonp 解決，這裏就很少作分析了，有須要的朋友能夠自行查詢資料，本文重點講究的從服務端角度解決跨域問題shell

另，如有朋友想直接看最終建議的解決方案，可直接看文章最後面。json

1、不作任何限制的跨域請求配置（不建議）

代碼

server {
        ... ...

        add_header Access-Control-Allow-Origin *;

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin *;
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

上述配置作法，雖然作到了去除跨域請求控制，可是因爲對任何請求來源都不作控制，看起來並不安全，因此不建議使用跨域

2、指定一個域名白名單跨域請求配置（具備侷限性）

代碼

server {
        ... ...

        add_header Access-Control-Allow-Origin http://127.0.0.1;

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin http://127.0.0.1;
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

上述配置作法，僅侷限於 http://127.0.0.1 域名進行跨域訪問，假設我使用 http://localhost 請求，儘管都是同一臺機器，同一個瀏覽器，它依舊會提示 No 'Access-Control-Allow-Origin' header is present on the requested resource 。瀏覽器

若是沒有特殊要求，使用此種方式已經足夠。安全

3、錯誤的指定多個域名白名單跨域請求配置（不成功）

代碼

server {
        ... ...

        add_header Access-Control-Allow-Origin 'http://127.0.0.1, http://locahost';

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin 'http://127.0.0.1, http://locahost';
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}

分析

可能有朋友已經想到了，既然能夠配置一個，確定也能夠配置多個，在後面加上逗號繼續操做便可，那麼最終配置結果就是上述代碼，當應用到項目中，會發現報錯，提示：The 'Access-Control-Allow-Origin' header contains multiple values 'http://127.0.0.1, http://localhost', but only one is allowed. Origin 'http://127.0.0.1:9000' is therefore not allowed access.cors

查了資料，基本上意思就是說只能配置一個，不能配置多個。jsonp

這個就尷尬了，怎麼配置多個呢？請讀者繼續往下看。ui

3、經過設置變量值解決指定多個域名白名單跨域請求配置（建議使用）

代碼

server {
        ... ...

        set $cors_origin "";
        if ($http_origin ~* "^http://127.0.0.1$") {
                set $cors_origin $http_origin;
        }
        if ($http_origin ~* "^http://localhost$") {
                set $cors_origin $http_origin;
        }
        add_header Access-Control-Allow-Origin $cors_origin;

        location / {
                if ($request_method = 'OPTIONS') {
                   add_header Access-Control-Allow-Origin $cors_origin;
                   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
                        return 204;
                }
                 
                ... ...
        }
}