Nginx搭建伺服器的跨網域存取設定與CORS協定支援指南

Nginx搭建伺服器的跨網域存取設定和CORS協定支援指南

引言：
在目前的網路應用程式開發中，跨網域請求已經成為一種常見的需求。為了確保安全性，瀏覽器預設會限制透過AJAX請求進行的跨網域操作。 CORS（跨域資源共享）協定為開發者提供了一個可靠的解決方案，可以實現跨域存取的可控授權。

Nginx是一個高效能的Web伺服器和反向代理伺服器，本文將介紹如何使用Nginx來建立伺服器的跨網域存取設定和CORS協定支援。

1. 設定伺服器的跨網域存取
   為了授權其他網域的訪問，我們首先需要在Nginx的設定檔中新增跨網域存取設定。開啟Nginx的設定檔（通常是/etc/nginx/nginx.conf），在http部分新增以下設定：

http {
    ...
    
    # 允许跨域访问
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';
}

上述設定允許所有網域（*）進行訪問，並且支援GET、 POST、OPTIONS方法。同時，我們也指定了一些常見的請求頭資訊。

在儲存並退出設定檔後，重新載入Nginx設定使其生效：

$ sudo nginx -s reload

2. 設定CORS協定支援
   在伺服器中新增跨網域存取設定後，我們還可以更細粒度地配置CORS協定的支援。以下是一個範例配置，只允許指定網域名稱進行跨網域存取：

http {
    ...
    
    # 配置CORS
    map $http_origin $allowed_origin {
        default "";
        ~^https?://(www.)?example.com$ $http_origin;
        ~^https?://(www.)?example.net$ $http_origin;
    }
    
    server {
        ...
        
        location / {
            if ($allowed_origin != "") {
                add_header 'Access-Control-Allow-Origin' $allowed_origin;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            }
            
            ...
        }
    }
}

在上述配置中，我們使用了map指令來定義一個$allowed_origin變量，用於儲存允許跨網域存取的網域。在server區塊中配置了location /，並透過if#指令判斷目前請求來源的網域是否在允許清單中。如果是，則新增相應的CORS頭資訊。此外，我們也可以根據自己的需求添加更多的規則。

3. CORS請求的預檢（preflight）
   在某些情況下，跨域請求需要進行預檢操作。例如使用了自訂的請求頭資訊或非簡單請求（例如PUT、DELETE等）時。預檢請求是在實際請求之前發送的一種OPTIONS請求，用於取得伺服器對實際請求的授權。

為了支援預檢請求，我們只需要在location /區塊中新增以下設定即可：

location / {
    ...
    
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $allowed_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        return 204;
    }
    
    ...
}

上述設定中，當請求方法為OPTIONS時，我們回傳204（No Content）並新增CORS頭資訊。

結論：
透過上述配置，我們可以輕鬆地建立伺服器的跨網域存取配置和CORS協定支援。無論是簡單的跨域請求，還是複雜的預檢請求，Nginx都可以提供靈活可靠的解決方案。

參考文獻：

• [Nginx官方文件](https://nginx.org/en/docs/)
• [CORS官方文件](https ://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)

#

以上是Nginx搭建伺服器的跨網域存取設定與CORS協定支援指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！