使用Faust.js、WPGraphQL搭建无头WP项目遇GraphQL端点无法找到错误

• 验证WordPress站点与GraphQL端点可用性

  • 直接在浏览器访问 http://localhost:10039/index.php?graphql，确认是否能打开GraphQL Playground界面。如果无法打开：
    • 检查本地WP服务器（如WAMP/XAMPP）是否正常运行，端口10039是否配置正确。
    • 登录WP后台插件列表，确认WPGraphQL插件处于激活状态。
    • 暂时禁用WP的安全插件、防火墙类插件，排查是否存在请求拦截情况。

• 核对.env.local配置准确性

  • 确保.env.local中的NEXT_PUBLIC_WORDPRESS_URL（或对应GraphQL端点配置项）为http://localhost:10039，无多余斜杠或拼写错误。
  • 执行npm run generate前，重启本地开发服务器，保证环境变量生效。

• 处理跨域与本地请求问题

  • 若浏览器控制台出现CORS相关报错，安装并激活WPGraphQL CORS插件，配置允许前端本地域名（如http://localhost:3000）的跨域请求。
  • 尝试将GraphQL端点替换为http://127.0.0.1:10039/index.php?graphql，规避localhost解析异常。

• 排查Faust.js配置细节

  • 登录WP后台Faust插件设置页，确认“Frontend Site URL”填写的是前端项目本地地址（如http://localhost:3000），且“GraphQL Endpoint”路径正确。
  • 检查faust.config.js中的配置与.env.local完全一致，无硬编码的错误端点地址。

• 额外排查方向

  • 检查本地hosts文件，确认localhost指向正确的127.0.0.1。
  • 使用curl或Postman测试GraphQL端点请求，判断问题出在前端还是后端：

    curl http://localhost:10039/index.php?graphql -H "Content-Type: application/json" -d '{"query":"{posts{nodes{title}}}"}'
    

内容的提问来源于stack exchange，提问作者Paweł Kellner