Nginx跨域配置是處理不同源之間資源請求的重要機制，主要用于解決瀏覽器安全策略中的同源策略限制問題。以下是關于Nginx跨域配置的詳細說明：

一、跨域請求概述

跨域資源共享（CORS，Cross-Origin Resource Sharing）是一種機制，它使用額外的HTTP頭部來告訴瀏覽器讓運行在一個origin（域）上的Web應用被準許訪問來自不同源服務器上的指定的資源。當一個資源從與該資源本身所在的服務器不同的域、協議或端口請求一個資源時，資源會發起一個跨域HTTP請求。

二、Nginx跨域配置步驟

1. 定位并打開Nginx配置文件

Nginx的主配置文件通常位于/etc/nginx/nginx.conf，但也可能位于/usr/local/nginx/conf/nginx.conf或其他路徑。你可能還需要編輯特定站點的配置文件，這些文件通常位于/etc/nginx/sites-available/目錄下，并通過符號鏈接連接到/etc/nginx/sites-enabled/目錄。

2. 編輯配置文件

在Nginx配置文件中，找到或創建一個server塊，該塊定義了特定域名或IP的服務器配置。在server塊內，你可以使用location指令來定義如何處理特定路徑的請求。對于跨域請求，你可以在location塊內添加add_header指令來設置CORS相關的HTTP頭部。

3. 設置CORS頭部

• Access-Control-Allow-Origin：指定允許跨域請求的源。可以是具體的域名（如http://example.com），或者使用*表示允許所有源。但是，當需要攜帶憑證（如Cookies）時，必須指定具體的域名。

• Access-Control-Allow-Methods：列出允許的HTTP方法，如GET、POST、PUT、DELETE、OPTIONS等。

• Access-Control-Allow-Headers：指定允許在請求中使用的自定義頭部，如Content-Type、Authorization等。

• Access-Control-Allow-Credentials：如果設置為true，則允許跨域請求攜帶憑證（如Cookies）。當設置此選項時，Access-Control-Allow-Origin不能設置為*，必須指定具體的域名。

• Access-Control-Max-Age：指定預檢請求的有效期（以秒為單位），在有效期內，瀏覽器不會再次發送預檢請求。

4. 示例配置

server {

listen 80;

server_name yourdomain.com;

location /api/ {

# 允許特定源跨域訪問

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

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

add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';

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

# 對于OPTIONS預檢請求，直接返回204

if ($request_method = 'OPTIONS') {

return 204;

}

# 其他配置...

}

}

或者，允許所有源跨域訪問：

server {

listen 80;

server_name yourdomain.com;

location /api/ {

# 允許所有源跨域訪問

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

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

add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';

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

# 如果使用Nginx作為反向代理，請添加相應的proxy_pass配置

# proxy_pass http://backend-server:port/api/;

# 其他配置...

}

}

三、配置生效

配置修改完成后，需要保存文件并重啟Nginx服務以使更改生效。重啟Nginx服務的命令通常是：

sudo systemctl restart nginx

或者，如果使用的是其他系統管理工具：

sudo service nginx restart

四、測試和驗證

配置完成后，可以使用瀏覽器的開發者工具（如Chrome的開發者工具）來測試和驗證跨域配置是否生效。觀察網絡請求和響應的HTTP頭部，確認是否包含了正確的CORS頭部信息。

五、安全注意事項

• 跨域配置需確保安全，僅允許可信源訪問敏感數據。

• 對于復雜場景，可能需要結合map指令動態生成Access-Control-Allow-Origin值，或使用if條件判斷。

• 測試跨域配置時，務必檢查瀏覽器開發者工具的網絡面板，觀察實際發送和接收的HTTP頭信息。

以上便是使用Nginx配置跨域請求的詳細步驟，包括代碼示例及注釋說明。根據實際情況選擇合適的配置方式，并確保重啟Nginx服務以應用配置。如有問題，應檢查Nginx錯誤日志以排查故障。

原文來源：https://mp.weixin.qq.com/s/11D682HpXUXa42lXtvz3XA