如何在Web伺服器上設定CORS?

跨域資源共享(CORS)仍然是現代Web開發的重要組成部分，特別是對於在伺服器租用環境中工作的開發人員來說。無論您是在管理微服務、建構API還是處理前端請求，了解CORS設定對於安全高效的Web應用程式都至關重要。

深入理解CORS：技術詳解

在深入伺服器設定之前，讓我們從技術角度分析CORS。CORS通過新的HTTP標頭擴展了HTTP協定，使瀏覽器能夠存取來自不同來源的資源。可以將其視為域之間的安全橋樑，在保持安全邊界的同時允許受控存取。

當瀏覽器發出跨域請求時，它會自動包含”Origin”標頭。然後伺服器通過發送適當的CORS標頭來決定是否允許該請求。以下是典型的CORS請求流程：


Browser -> Server: 
GET /api/data
Origin: https://app.example.com

Server -> Browser:
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

Apache伺服器CORS設定

對於Apache伺服器，CORS設定可以在.htaccess檔案或主伺服器設定中實現。以下是一個完整示例：


# In .htaccess or Apache configuration
Header set Access-Control-Allow-Origin "https://trusted-site.com"
Header set Access-Control-Allow-Methods "GET,POST,OPTIONS,DELETE,PUT"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
Header set Access-Control-Allow-Credentials "true"

# Handle OPTIONS preflight requests
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Nginx伺服器CORS實現

Nginx的CORS設定通常比Apache更簡潔。以下是在伺服器區塊設定中的實現方式：


server {
    location / {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
            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' '*' always;
    }
}

此設定有效處理了標準請求和預檢OPTIONS請求。’always’參數確保即使在錯誤回應中也會發送標頭資訊。

IIS伺服器CORS設定

微軟IIS伺服器需要不同的方法。您可以通過Web.config檔案或使用IIS管理器設定CORS。以下是Web.config示例：


<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Headers" value="Content-Type" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
                <add name="Access-Control-Allow-Credentials" value="true" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

安全最佳實踐和常見陷阱

在伺服器租用環境中實施CORS時，需要注意以下安全考慮因素：

在生產環境中避免使用’*’作為Access-Control-Allow-Origin
實施適當的來源驗證
考慮允許憑證的影響
謹慎管理預檢快取

以下是動態來源驗證的安全示例：


# Apache設定與動態來源驗證
SetEnvIf Origin "^https?://(.*\.)?trusted-domain.com$" ALLOWED_ORIGIN=$0
Header set Access-Control-Allow-Origin %{ALLOWED_ORIGIN}e env=ALLOWED_ORIGIN

除錯CORS問題

CORS故障排除可能很複雜。以下是使用瀏覽器開發者工具和curl命令的系統方法：


# 使用curl測試CORS標頭
curl -X OPTIONS \
  -H "Origin: https://your-app.com" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: X-Requested-With" \
  -verbose \
  https://api.target-server.com/endpoint

進階CORS情境

現代Web應用程式通常需要複雜的CORS設定。以下是處理複雜情境的方法：

多個允許的來源
每個端點不同的標頭
WebSocket連接
Service Worker請求

對於多個來源，考慮以下動態Nginx設定：


map $http_origin $cors_origin {
    default "";
    "~^https?://.*\.trusted-domain1\.com$" "$http_origin";
    "~^https?://.*\.trusted-domain2\.com$" "$http_origin";
}

server {
    location /api/ {
        if ($cors_origin) {
            add_header 'Access-Control-Allow-Origin' $cors_origin;
        }
        # 此處添加其他CORS標頭
    }
}

測試和驗證

實施以下測試策略以確保CORS設定正確運作：

使用自動化測試腳本
驗證預檢處理
檢查憑證行為
測試錯誤情境

以下是一個簡單的Node.js測試腳本：


const fetch = require('node-fetch');

async function testCORS(origin, endpoint) {
    try {
        const response = await fetch(endpoint, {
            method: 'OPTIONS',
            headers: {
                'Origin': origin,
                'Access-Control-Request-Method': 'POST'
            }
        });
        console.log('CORS Headers:', response.headers);
        return response.ok;
    } catch (error) {
        console.error('CORS Test Failed:', error);
        return false;
    }
}