Nginx配置允許跨域

一、nginx跨域是什麼

同源策略是瀏覽器最常用的安全策略，它的基本思想是：限制一個文檔或者腳本只能獲取屬於它自己的資源，防止惡意的網站竊取數據。在這個限制下，跨域就成了一個不可避免的問題。

簡單來說，當一個網頁從一個域名去請求另一個域名下的資源時，就會觸發跨域問題。例如，從http://www.example.com/index.html中的JS代碼請求http://www.baidu.com的資源就構成了跨域。

二、nginx跨域怎麼配置

下面給出配置詳細步驟：

1.修改nginx配置文件nginx.conf，添加如下內容：

    server{
        listen       80;
        server_name  example.com;
        location / {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,Websocket-Upgrade,Upgrade-Insecure-Requests,User-Agent,Referer,Cache-Control,Origin, X-Requested-With, Content-Type, Authorization, Accept-Language';
            add_header 'Access-Control-Allow-Credentials' true;
            if ($request_method = 'OPTIONS') {
                return 204;
            }
        }
    }

2.重啟nginx。

    sudo systemctl restart nginx

3. 驗證是否配置成功。在chrome瀏覽器上打開console窗口，輸入如下代碼：

    fetch('http://example.com').then(response => response.text()).then(data => console.log(data))

如果出現返回數據說明配置成功。如果仍然報錯，請核對配置是否正確。

三、nginx允許跨域

如何允許跨域？

下面是一些常用的允許跨域的方式：

1.使用反向代理

有時候我們的API服務器由於各種原因，不能直接訪問，這個時候我們可以使用反向代理。如下：

    server {
        listen       80;
        server_name  example.com;
        location / {
            proxy_pass http://api.example.com;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
            add_header 'Access-Control-Allow-Headers' '*';
        }
    }

2.使用jsonp

jsonp是一種前端跨域解決方案，它採用script標籤跨域獲取數據。如下：

    
        function jsonpCallback(data) {
            console.log(data)
        }
        var script = document.createElement('script')
        script.src = 'http://example.com/data.php?callback=jsonpCallback'
        document.body.appendChild(script)
    

3.使用cors

CORS是一種新的跨域解決方案，它是通過在http頭中添加“Access-Control-Allow-Origin”來授權跨域的。如下：

    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

四、nginx解決跨域配置詳細教程

詳細的nginx解決跨域配置教程如下：

1.在nginx.conf中添加以下內容：

    server {
        listen              80;
        server_name         example.com;

        location / {
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,Websocket-Upgrade,Upgrade-Insecure-Requests,User-Agent,Referer,Cache-Control,Origin, X-Requested-With, Content-Type, Authorization, Accept-Language';
                add_header 'Access-Control-Allow-Credentials' true;
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,Websocket-Upgrade,Upgrade-Insecure-Requests,User-Agent,Referer,Cache-Control,Origin, X-Requested-With, Content-Type, Authorization, Accept-Language';
            add_header 'Access-Control-Allow-Credentials' true;
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'application/json; charset=utf-8';
        }
    }

2.重啟nginx。

    sudo systemctl restart nginx

3.測試nginx跨域是否成功配置。

    fetch('http://example.com').then(response => response.text()).then(data => console.log(data))

五、nginx安裝配置

若您還沒有為您的服務器安裝nginx，請按照以下步驟進行：

1.安裝nginx：

    sudo apt-get update
    sudo apt-get install nginx

2.啟動nginx：

    sudo systemctl start nginx

3.檢查nginx是否啟動：

    systemctl status nginx

六、正確的nginx跨域配置

正確的nginx跨域配置應該包含以下幾個方面：

1.允許多個域名跨域

在“Access-Control-Allow-Origin”中添加多個域名。如下：

    add_header 'Access-Control-Allow-Origin' 'http://a.com, http://b.com, http://c.com';

2.允許特定域名跨域

在“Access-Control-Allow-Origin”中添加特定的域名。如下：

    add_header 'Access-Control-Allow-Origin' 'http://a.com';

3.允許所有域名跨域

在“Access-Control-Allow-Origin”中添加通配符“*”。如下：

    add_header 'Access-Control-Allow-Origin' '*';

4.允許請求頭

在“Access-Control-Allow-Headers”中添加允許請求頭。如下：

    add_header 'Access-Control-Allow-Headers' 'DNT,Websocket-Upgrade,Upgrade-Insecure-Requests,User-Agent,Referer,Cache-Control,Origin, X-Requested-With, Content-Type, Authorization, Accept-Language';

5.允許請求方法

在“Access-Control-Allow-Methods”中添加允許請求方法。如下：

    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

6.允許攜帶cookie

在“Access-Control-Allow-Credentials”中允許攜帶cookie。如下：

    add_header 'Access-Control-Allow-Credentials' true;

註：如果不需要攜帶cookie，該項可以省略。

7.緩存預檢請求

可以在“Access-Control-Max-Age”中設置預檢請求的過期時間。如下：

    add_header 'Access-Control-Max-Age' 1728000;

在實際使用中，應根據需求選取相關參數進行配置，保證安全和穩定而不浪費資源。