ReactJS对接WordPress WPGraphQL端点跨域报错求助

错误原因 #

当你在Apollo客户端设置credentials: 'include'时，浏览器出于安全要求，服务器返回的Access-Control-Allow-Origin头不能是通配符*，必须是前端应用的具体域名（含端口），否则会阻止携带凭证（如Cookie）的跨域请求。

解决方案 #

方法1：用WPGraphQL专用CORS插件

安装并激活WPGraphQL CORS插件，在WordPress后台的WPGraphQL设置页面，找到「Allowed Origins」选项，填入你的前端应用完整域名（比如http://localhost:3000，根据你的React服务端口调整），保存后即可生效。

方法2：手动添加CORS响应头

如果不想用插件，可在WordPress主题的functions.php文件末尾添加以下代码（或创建自定义插件）：

add_action('graphql_response_headers_to_send', function($headers) {
    // 替换为你的前端实际域名
    $allowed_frontend_origin = 'http://localhost:3000';
    
    // 验证请求来源是否为允许的域名
    if (isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN'] === $allowed_frontend_origin) {
        $headers['Access-Control-Allow-Origin'] = $allowed_frontend_origin;
        $headers['Access-Control-Allow-Credentials'] = 'true';
    }
    
    return $headers;
});

修改后记得刷新WordPress缓存，确保代码生效。

方法3：开发环境用React代理（仅适用于本地开发）

在React项目的package.json中添加代理配置：

"proxy": "http://localhost/wordpress"

然后将Apollo客户端的uri修改为相对路径：

const httpLink = createHttpLink({
  uri: '/graphql',
  credentials: 'include'
});

这种方式通过React开发服务器代理请求，绕过浏览器的CORS检查，适合本地开发阶段使用，生产环境仍需配置服务器端CORS头。

额外注意事项 #

• 如果你不需要携带凭证访问WPGraphQL（比如只获取公开内容），可以将credentials: 'include'改为credentials: 'same-origin'或直接移除该配置，此时服务器用*作为允许的origin也能正常工作。
• 确保前端域名和端口与服务器配置的Access-Control-Allow-Origin完全一致，包括HTTP/HTTPS协议。

内容的提问来源于stack exchange，提问作者Pranav Kalambe