您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

PHP 實現跨域請求 (CORS) 完整指南：Access-Control-Allow-Origin 配置與預檢請求處理

編輯：PHP 綜合知識

跨域問題由來

瀏覽器同源策略攔截非同源請求。本地文件 (file:// 或 localhost:8080) 請求 API (api.example.com) 觸發 CORS 錯誤：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

預檢請求 (Preflight)

非簡單請求 (含自定義 Header、非 GET/POST/HEAD、Content-Type 非表單類型) 會先發送 OPTIONS 請求詢問服務器是否允許跨域。

服務器端解決方案 (PHP)

核心代碼

<?php
// 必須在任何輸出前設置
header('Access-Control-Allow-Origin: *'); // 或具體域名: https://a.example.com
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
header('Access-Control-Max-Age: 86400'); // 預檢緩存 24 小時

// 處理 OPTIONS 預檢請求直接返回
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0);
}

// 正常業務邏輯...
echo json_encode(['status' => 'ok', 'data' => [...]]);

關鍵 Header 詳解

Header	作用	示例
Access-Control-Allow-Origin	允許的源 (* 或單一域名)	* / https://a.com
Access-Control-Allow-Methods	允許的 HTTP 方法	GET, POST, OPTIONS
Access-Control-Allow-Headers	允許的請求頭	Content-Type, Authorization
Access-Control-Allow-Credentials	是否允許攜帶 Cookie	true (需 Origin 非 *)
Access-Control-Max-Age	預檢結果緩存秒數	86400
Access-Control-Expose-Headers	允許 JS 讀取的響應頭	X-Total-Count

帶憑證請求 (Cookies/Authorization)

header('Access-Control-Allow-Origin: https://a.example.com'); // 不能用 *
header('Access-Control-Allow-Credentials: true');

前端 AJAX 設置 xhr.withCredentials = true 或 fetch(..., {credentials: 'include'})。

Nginx/Apache 層面配置 (推薦)

# Nginx
location /api/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
    if ($request_method = OPTIONS) { return 204; }
    proxy_pass https://php_backend;
}