Apache 配置 CORS 跨域資源共享：支援 HTTPS API 與 AJAX 複雜請求完整指南

前後端分離架構下，瀏覽器同源策略阻攔跨域 AJAX 請求。Apache 透過 mod_headers 注入 CORS 標頭，可靈活控制允許來源、方法、標頭與憑證。本文針對 HTTPS API 場景，提供生產級配置模板與預檢請求 (Preflight) 處理細節。

啟用模組

# httpd.conf
LoadModule headers_module modules/mod_headers.so

VirtualHost 級配置 (HTTPS 站點)

<VirtualHost *:443>
    ServerName api.example.com
    SSLEngine on
    SSLCertificateFile /path/to/cert.pem
    SSLCertificateKeyFile /path/to/key.pem

    # === CORS 核心標頭 ===
    # 1. 允許來源 (生產建議指定具體域名，避免 *)
    Header always set Access-Control-Allow-Origin "https://app.example.com"

    # 2. 允許方法
    Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"

    # 3. 允許自定義標頭 (關鍵：Content-Type, Authorization 等)
    Header always set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"

    # 4. 允許攜帶憑證
    Header always set Access-Control-Allow-Credentials "true"

    # 5. 預檢請求快取時間 (減少 OPTIONS 請求)
    Header always set Access-Control-Max-Age "86400"

    # === 處理 OPTIONS 預檢請求 (204 No Content 直接返回) ===
    <IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteCond %{REQUEST_METHOD} OPTIONS
        RewriteRule ^(.*)$ $1 [R=204,L]
    </IfModule>
</VirtualHost>

關鍵細節解析

動態回傳 Origin 進階配置 (支援多域名 + Credentials)

<IfModule mod_setenvif.c>
    SetEnvIf Origin "^https?://(app\.example\.com|admin\.example\.com)$" ACCESS_CONTROL_ORIGIN=$0
</IfModule>
Header always set Access-Control-Allow-Origin "%{ACCESS_CONTROL_ORIGIN}e" env=ACCESS_CONTROL_ORIGIN
Header always set Access-Control-Allow-Credentials "true" env=ACCESS_CONTROL_ORIGIN

驗證清單

1. 重啟 Apache：apachectl -t && systemctl reload httpd
2. 瀏覽器開發者工具 Network 面板發起跨域請求，檢查 Response Headers 包含上述標頭。
3. 預檢請求 (OPTIONS) 返回 204/200，無 403/500。
4. 實際請求 (POST JSON) 成功返回業務數據。
5. 若需支援子域名通配，Apache 2.4+ 可用 Header always set Access-Control-Allow-Origin "https://*.example.com" (需瀏覽器支援)，否則仍需動態回傳。

參考規範：W3C CORS Spec。生產環境務必限制 Origin 白名單，避免 * 洩露內部 API。