WordPress REST API 是現(xiàn)代WordPress開發(fā)中不可或缺的功能，它允許開發(fā)者通過HTTP請求與WordPress站點進行數(shù)據(jù)交互。然而在實際開發(fā)中，特別是前端應用與WordPress后端分離部署時，經(jīng)常會遇到跨域資源共享(CORS)問題。

什么是跨域問題

跨域問題源于瀏覽器的同源策略(Same-Origin Policy)，當你的前端應用(如React/Vue)運行在http://localhost:3000，而WordPress站點部署在http://example.com時，瀏覽器會阻止這種跨域請求。

WordPress REST API跨域解決方案

1. 修改WordPress主題的functions.php

最直接的方法是在當前主題的functions.php文件中添加以下代碼：

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

2. 使用CORS插件

對于不熟悉代碼修改的用戶，可以安裝專門的CORS插件：

• WP CORS：簡單易用的跨域支持插件
• JWT Authentication for WP REST API：同時提供JWT認證和CORS支持

3. Nginx服務器配置

如果你的WordPress運行在Nginx服務器上，可以在站點配置中添加：

location /wp-json/ {
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,Authorization';
}

4. Apache服務器配置

對于Apache服務器，可以在.htaccess文件中添加：

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT, DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>

安全注意事項

1. 生產(chǎn)環(huán)境中不建議使用Access-Control-Allow-Origin: *，應該指定具體的域名
2. 對于需要認證的API端點，確保只對可信來源開放跨域訪問
3. 考慮結合JWT等認證機制保護API安全

測試跨域是否生效

可以使用以下JavaScript代碼測試跨域是否配置成功：

fetch('https://your-wordpress-site.com/wp-json/wp/v2/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

通過以上方法，你可以輕松解決WordPress REST API的跨域問題，為前后端分離開發(fā)掃清障礙。