如何正確配置NGINX實現跨域請求？

跨域請求是指一個頁面的文檔、腳本、圖片或其他資源，從不同的域名、埠或協議發起請求。這種需要跨域請求的場景日益增加，比如前後端分離的項目中，前端用Vue、React等框架進行開發，而後端用Java、PHP等語言進行開發。在這種情況下，前後端的域名往往是不同的，因此就需要實現跨域請求。

一、添加響應頭

在 NGINX 中，可以使用 add_header 指令來添加響應頭，實現跨域請求。例如，以下代碼將在響應頭中添加 Access-Control-Allow-Origin 欄位，允許所有跨域請求的來源，即「*」：

server {
    listen 80;
    server_name example.com;
    add_header 'Access-Control-Allow-Origin' '*' always;
    ...
}

在 add_header 指令中，’Access-Control-Allow-Origin’ 表示要添加的響應頭欄位，’*’ 表示允許所有來源跨域請求，always 表示將該響應頭添加到所有響應中。

另外，當需要支持帶有認證信息的跨域請求時，需要將 ‘Access-Control-Allow-Origin’ 的值設置為請求域的完整 URL，而不是「*」。這樣做可以提高安全性，避免信息泄露。

二、使用 NGINX 反向代理

NGINX 可以作為反向代理伺服器，將請求轉發給其他域名的伺服器。這樣做可以避免跨域請求，但僅適用於同一協議的情況。例如，以下代碼將把以 /api 開頭的請求轉發給另一個域名的伺服器：

server {
    listen 80;
    server_name example.com;
    location /api {
        proxy_pass http://api.example.com;
    }
    ...
}

在這個示例中，以 /api 開頭的請求會被 NGINX 轉發給 http://api.example.com。使用這種方法實現跨域請求需要保證轉發的目標域名是可信的，否則存在安全風險。

三、使用 NGINX Lua 模塊

NGINX Lua 模塊是一個開源的擴展模塊，可以通過編寫 Lua 腳本實現跨域請求。例如，以下代碼將處理以 /api 開頭的請求，添加響應頭，並將響應體中含有 id 欄位的 JSON 數據轉換為大寫字母：

server {
    listen 80;
    server_name example.com;
    location /api {
        header_filter_by_lua_block {
            ngx.header.content_type = 'application/json'
            ngx.header.access_control_allow_origin = '*';
        }

        content_by_lua_block {
            local json = require('cjson')
            local data = {id = 1234, name = 'John'}
            local str = json.encode(data)
            ngx.say(string.upper(str))
        }
    }
    ...
}

在這個示例中，header_filter_by_lua_block 以 Lua 語言編寫的腳本，用於添加響應頭；content_by_lua_block 也是以 Lua 語言編寫的腳本，用於處理響應體。使用這種方法的好處是可以靈活地控制跨域請求的處理過程，但需要對 Lua 語言有一定的了解。

四、使用 NGINX 自帶的模塊

NGINX 自帶的模塊也可以實現跨域請求。例如，以下代碼將在 /api 介面的響應頭中添加允許跨域請求的欄位：

server {
    listen 80;
    server_name example.com;
    location /api {
        add_header 'Access-Control-Allow-Origin' '*' always;
        ...
    }
    ...
}

這種方法相對比較簡單，但只能實現基本的跨域請求，不能滿足更複雜的需求。

五、總結

以上是實現跨域請求的幾種方法，它們分別適用於不同的場景，並且有各自的優缺點。在實際開發中，需要根據項目的具體情況選擇合適的方法，以達到較好的效果。