Nginx設置跨域詳解

一、Nginx設置跨域代理

跨域代理是指把請求發送到另外一個域名下的服務器進行處理，再將處理結果返回給客戶端。在前端開發中，我們常常需要在本地開發環境中調用遠端服務器的接口，此時就需要使用到跨域代理。

示例代碼：

location / {
    proxy_pass https://example.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

二、Nginx如何設置允許跨域

Nginx可以設置允許跨域請求的HTTP頭字段來解決跨域問題。一般來說，需要設置Access-Control-Allow-Origin頭字段為允許跨域請求的域名。

示例代碼：

add_header 'Access-Control-Allow-Origin' 'http://example.com' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type' always;

三、Nginx設置跨域請求

在使用ajax進行跨域請求時，需要設置請求頭字段X-Requested-With為XMLHttpRequest，以便確保後端可以正確處理跨域請求。

示例代碼：

location /api/ {
    add_header 'Access-Control-Allow-Origin' 'http://example.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,X-Requested-With' always;
}

四、Nginx設置跨域不生效

在Nginx配置文件中，如果location匹配成功後，還有其他規則也和匹配上了，那麼不會使用頂層location的跨域規則。此時需要使用break或者return來終止其他規則的匹配。

示例代碼：

location /api/ {
    add_header 'Access-Control-Allow-Origin' 'http://example.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,X-Requested-With' always;
    break;
}

五、Nginx設置跨域白名單

在Nginx配置文件中，可以使用if語句判斷請求的來源是否在白名單中，以決定是否允許跨域請求。

示例代碼：

set $allow_cors 0;
if ($http_origin ~* (https?://example\.com(:[0-9]+)?$)) {
    set $allow_cors 1;
}
if ($request_method = 'OPTIONS') {
    set $allow_cors "${allow_cors}opt";
}
if ($allow_cors = "1opt") {
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,X-Requested-With' always;
    add_header 'Access-Control-Max-Age' 1728000 always;
    add_header 'Content-Length' 0 always;
    return 204;
}

六、Nginx配置跨域代理

Nginx可以配置反向代理來實現跨域請求。將請求發送到本地Nginx，然後Nginx再將請求轉發到目標服務器。

示例代碼：

location /api/ {
    proxy_pass https://example.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,X-Requested-With' always;
}

七、Nginx設置跨域請求攜帶cookie

在Nginx配置中，需要設置add_header ‘Access-Control-Allow-Credentials’ ‘true’才能允許跨域請求攜帶cookie。

示例代碼：

location /api/ {
    proxy_pass https://example.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,X-Requested-With' always;
}

八、Nginx跨域怎麼配置

Nginx配置跨域有多種方案，需要綜合考慮業務需求和安全性要求，選擇合適的方案。

示例代碼：

location /api/ {
    if ($http_origin ~* (https?://example\.com(:[0-9]+)?$)) {
        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,X-Requested-With' always;
        add_header 'Access-Control-Max-Age' 1728000 always;
        add_header 'Content-Length' 0 always;
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass https://example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    if ($http_origin ~* (https?://example2\.com(:[0-9]+)?$)) {
        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,X-Requested-With' always;
        add_header 'Access-Control-Max-Age' 1728000 always;
        add_header 'Content-Length' 0 always;
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass https://example2.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

九、Nginx解決跨域

Nginx解決跨域可以從多個方面入手，如設置允許跨域的HTTP頭字段、設置跨域代理、設置跨域白名單等。

示例代碼：

location /api/ {
    if ($http_origin ~* (https?://example\.com(:[0-9]+)?$)) {
        add_header 'Access-Control-Allow-Origin' "$http_origin" always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,X-Requested-With' always;
        add_header 'Access-Control-Max-Age' 1728000 always;
        add_header 'Content-Length' 0 always;
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass https://example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

十、總結

本文詳細介紹了Nginx設置跨域的多種方案，包括設置跨域代理、設置允許跨域的HTTP頭字段、設置跨域白名單等。在實際開發中，需要根據業務需求和安全性要求選擇最合適的方案。