什么是跨域问题？
跨域（Cross-Origin Resource Sharing, CORS）是指浏览器出于安全考虑，限制网页从一个域名请求另一个域名的资源。例如，如果你的WordPress网站（example.com）尝试通过JavaScript访问另一个域名（api.anothersite.com）的数据，浏览器会阻止该请求，除非目标服务器明确允许跨域访问。
WordPress中常见的跨域场景
- 前端与REST API分离部署：当WordPress作为后端提供REST API，而前端使用Vue/React等框架部署在不同域名时。
- 第三方服务集成：如调用外部API（支付、地图等）时，可能因跨域限制导致请求失败。
- CDN或子域名资源加载：静态资源（图片、JS/CSS）存放在不同域名下时可能触发跨域问题。
解决方案
方法1：通过.htaccess或Nginx配置CORS
在服务器端添加HTTP头，允许特定域名的跨域请求。
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';
}
注意：
*表示允许所有域名，生产环境建议替换为具体域名（如https://yourfrontend.com）。
方法2：使用WordPress插件
安装插件（如 “WP CORS” 或 “Enable CORS”）可快速配置跨域规则，适合非技术用户。
方法3：通过PHP代码修改响应头
在主题的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单独启用跨域，可使用以下代码：
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;
}
注意事项
- 安全性：避免滥用
*通配符，仅允许可信域名。 - 缓存问题：修改HTTP头后，清除浏览器和服务器缓存。
- OPTIONS请求：部分复杂请求（如带自定义头的POST）会先发送
OPTIONS预检请求，需确保服务器正确处理。
总结
WordPress跨域问题可通过服务器配置、插件或代码解决，根据实际需求选择合适方案。对于前后端分离项目，建议结合REST API和CORS配置实现高效协作。
