Apollo Client无法获取URI：Next.js对接WordPress无头CMS报错

一、解决 process.env.NEXT_PUBLIC_WORDPRESS_API_URL 未定义的问题 #

1. 检查.env.local文件位置
   确保.env.local放在项目根目录（和package.json、next.config.js同级），不能放在src或其他子文件夹里。

2. 重启开发服务器
   Next.js只会在启动时加载环境变量，修改.env.local后必须停止当前开发服务，重新运行npm run dev或yarn dev。

3. 验证变量拼写与格式

   • 确认变量名严格为NEXT_PUBLIC_WORDPRESS_API_URL（大小写敏感）
   • 赋值时等号前后不能加多余空格，比如正确格式是NEXT_PUBLIC_WORDPRESS_API_URL=https://guzmanster.test
   • 确保文件扩展名是.env.local，不是.env或.env.development（Next.js优先加载.env.local作为本地环境配置）

4. 直接打印变量排查
   在apollo.js开头添加console.log(process.env.NEXT_PUBLIC_WORDPRESS_API_URL)，重启服务后查看控制台输出，确认变量是否被正确加载。

二、替换为具体URL后出现fetch failed的问题 #

1. 确认WordPress与WPGraphQL端点正常 #

• 先在浏览器打开https://guzmanster.test，确保WordPress站点能正常访问
• 访问https://guzmanster.test/graphql，确认能看到WPGraphQL的Playground界面（如果打不开，说明WPGraphQL插件未正确安装或激活）

2. 解决跨域（CORS）问题 #

如果Next.js运行在localhost:3000，而WordPress在其他端口/域名，需要配置WordPress允许跨域请求：

• 安装并激活WPGraphQL CORS插件，在插件设置里添加Next.js的地址（比如http://localhost:3000）
• 或者手动在WordPress的functions.php中添加CORS头：

add_action('graphql_http_request_before_send', function($response, $server, $request) {
    $response->getHeaders()->add('Access-Control-Allow-Origin', 'http://localhost:3000');
    $response->getHeaders()->add('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    $response->getHeaders()->add('Access-Control-Allow-Headers', 'Content-Type');
    return $response;
}, 10, 3);

3. 处理自签名SSL证书问题 #

如果你的本地WordPress用的是自签名SSL证书（比如.test域名），Node.js默认会拒绝信任，导致fetch失败：

• 本地开发时，可以在启动Next.js的命令前添加环境变量：

  NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev
  

• 或者修改Apollo客户端的fetch配置，跳过证书验证（仅本地开发使用，生产环境禁止）：

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";

const httpLink = createHttpLink({
  uri: 'https://guzmanster.test/graphql',
  fetch: (url, options) => {
    const https = require('https');
    return fetch(url, {
      ...options,
      agent: new https.Agent({ rejectUnauthorized: false })
    });
  }
});

export const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

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