Gridsome用Axios调用WP-GraphQL提交评论报No 'Access-Control-Allow-Origin' CORS错误

问题排查与解决方案 #

1. 首先修正前端Axios请求的错误配置 #

Access-Control-Allow-Origin 是服务端响应头，前端请求中不允许主动添加，浏览器会自动识别服务端返回的该字段，你加了这个请求头反而会触发预检请求校验失败，直接删除Axios配置里的这个headers项即可。
另外注意：你开启了withCredentials: true，后续服务端配置CORS的时候绝对不能用*通配符，必须明确指定匹配的前端域名。

2. 修正服务端CORS域名匹配错误 #

你当前在过滤器中配置的允许源是https://my_gridsome_front.com，但报错日志里的前端实际源是http://my_gridsome_front.com（注意协议是http不是https），协议不匹配会直接导致CORS校验失败，将过滤器中的域名改成和实际前端源完全一致的http://my_gridsome_front.com。

3. 补充OPTIONS请求的CORS头配置 #

你现在加的graphql_response_headers_to_send过滤器只会给正常的GraphQL POST请求返回CORS头，而浏览器发起预检用的OPTIONS请求不会走到这个钩子，需要额外添加过滤器处理OPTIONS请求：

add_action( 'init', function() {
    // 处理预检OPTIONS请求
    if ( isset( $_SERVER['REQUEST_METHOD'] ) && $_SERVER['REQUEST_METHOD'] === 'OPTIONS' ) {
        // 明确指定允许的前端源，和你实际的前端地址完全一致
        header( 'Access-Control-Allow-Origin: http://my_gridsome_front.com' );
        header( 'Access-Control-Allow-Credentials: true' );
        // 允许的请求头，按需补充你用到的头
        header( 'Access-Control-Allow-Headers: Content-Type, Authorization' );
        // 允许的请求方法
        header( 'Access-Control-Allow-Methods: POST, OPTIONS' );
        // 预检结果缓存时长，减少重复预检
        header( 'Access-Control-Max-Age: 86400' );
        // 直接返回200结束OPTIONS请求
        status_header( 200 );
        exit;
    }
} );

4. 排查插件冲突与重复配置 #

你同时开了WPGraphQL Cors插件的自动添加Origin配置、自己加的自定义过滤器，二者可能存在优先级冲突，建议先关闭插件的「Add Site Address to "Access-Control-Allow-Origin" header」选项，只保留自己的自定义过滤器逻辑，避免配置覆盖。

5. 排查服务器/缓存层拦截 #

如果上面的配置都修改完还是报错，检查你的WordPress部署环境：

• 有没有用Nginx/Apache做反向代理，代理层的配置可能覆盖了PHP返回的CORS头
• 有没有用CDN、静态缓存插件，可能拦截了OPTIONS请求或者缓存了错误的响应头
• 有没有安全防护插件（比如WP防火墙、安全狗之类的）拦截了跨域请求

内容的提问来源于stack exchange，提问作者Ali Seivani