迁移WordPress后端至Apache后WPGraphQL+NextJS的CORS错误如何修复

问题排查与解决步骤 #

• 确认Apache核心模块与.htaccess权限配置正常
  Apache的Header系列指令依赖mod_headers模块，迁移后大概率未启用：
  执行命令apache2ctl -M | grep headers检查模块状态，无输出则执行a2enmod headers开启模块，随后执行systemctl restart apache2重启服务。
  同时确认你的站点虚拟主机配置中AllowOverride参数设为All，否则.htaccess文件不会被加载生效。

• 修正.htaccess CORS规则，适配预检请求
  你当前的配置没有处理浏览器的OPTIONS预检请求，也没有兼容带身份凭证的请求场景，替换原有配置为以下内容：

  <IfModule mod_headers.c>
    # 替换为你的前端实际域名，禁止直接用*，带cookie/认证头的请求不支持通配符
    SetEnvIf Origin "^(https://你的前端域名\.com)$" AccessControlAllowOrigin=$0
    Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
    Header set Access-Control-Allow-Credentials true
  
    <IfModule mod_rewrite.c>
        RewriteEngine On
        # 预检请求直接返回204状态，无需后续处理
        RewriteCond %{REQUEST_METHOD} OPTIONS
        RewriteRule ^(.*)$ $1 [R=204,L]
    </IfModule>
  </IfModule>
  

• 配置WPGraphQL内置CORS规则
  WPGraphQL自带CORS校验逻辑，优先级高于服务器层配置，会覆盖你在.htaccess中添加的头信息。在WordPress当前使用主题的functions.php文件末尾添加以下代码：

  add_filter( 'graphql_cors_allowed_origins', function( $allowed_origins ) {
      // 添加你的前端域名到允许列表
      $allowed_origins[] = 'https://你的前端域名.com';
      return $allowed_origins;
  } );
  
  add_filter( 'graphql_cors_allowed_headers', function( $allowed_headers ) {
      $allowed_headers[] = 'Authorization';
      return $allowed_headers;
  } );
  

• 排查Cloudflare配置冲突

  1. 临时开启Cloudflare开发模式，清空全站缓存，排除旧的Nginx响应缓存干扰
  2. 用curl直接请求你的源站服务器（绕开Cloudflare）查看响应头是否携带Access-Control-Allow-Origin，如果源站正常走Cloudflare后无响应头，检查Cloudflare的页规则、转换规则是否有删除响应头的配置。

内容的提问来源于stack exchange，提问作者Miss Sandwich