WordPress跨域問題解決方案詳解

來自：素雅營銷研究院

方知筆記

2025年06月26日 09:08

什么是跨域問題？

跨域（Cross-Origin Resource Sharing, CORS）是指瀏覽器出于安全考慮，限制網(wǎng)頁從一個(gè)域名請(qǐng)求另一個(gè)域名的資源。例如，如果你的WordPress網(wǎng)站（example.com）嘗試通過JavaScript訪問另一個(gè)域名（api.anothersite.com）的數(shù)據(jù)，瀏覽器會(huì)阻止該請(qǐng)求，除非目標(biāo)服務(wù)器明確允許跨域訪問。

WordPress中常見的跨域場(chǎng)景

前端與REST API分離部署：當(dāng)WordPress作為后端提供REST API，而前端使用Vue/React等框架部署在不同域名時(shí)。
第三方服務(wù)集成：如調(diào)用外部API（支付、地圖等）時(shí)，可能因跨域限制導(dǎo)致請(qǐng)求失敗。
CDN或子域名資源加載：靜態(tài)資源（圖片、JS/CSS）存放在不同域名下時(shí)可能觸發(fā)跨域問題。

解決方案

方法1：通過`.htaccess`或Nginx配置CORS

在服務(wù)器端添加HTTP頭，允許特定域名的跨域請(qǐng)求。

Apache（.htaccess）：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"

Nginx：

location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type';
}

注意：*表示允許所有域名，生產(chǎn)環(huán)境建議替換為具體域名（如https://yourfrontend.com）。

方法2：使用WordPress插件

安裝插件（如 “WP CORS” 或 “Enable CORS”）可快速配置跨域規(guī)則，適合非技術(shù)用戶。

方法3：通過PHP代碼修改響應(yīng)頭

在主題的functions.php文件中添加以下代碼：

add_action('init', 'handle_cors');
function handle_cors() {
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
}

方法4：處理REST API跨域

若需為WordPress REST API單獨(dú)啟用跨域，可使用以下代碼：

add_filter('rest_pre_serve_request', 'add_cors_headers');
function add_cors_headers($value) {
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
return $value;
}

注意事項(xiàng)

安全性：避免濫用*通配符，僅允許可信域名。
緩存問題：修改HTTP頭后，清除瀏覽器和服務(wù)器緩存。
OPTIONS請(qǐng)求：部分復(fù)雜請(qǐng)求（如帶自定義頭的POST）會(huì)先發(fā)送OPTIONS預(yù)檢請(qǐng)求，需確保服務(wù)器正確處理。