Next.js SSR从Node.js GraphQL取数本地正常，Vercel部署报500错误求助

问题根源 #

从你的错误日志能直接定位问题：

FetchError: request to http://localhost:4000/ failed, reason: connect ECONNREFUSED 127.0.0.1:4000

部署到Vercel后，你的getServerSideProps代码还在硬编码请求http://localhost:4000/——但Vercel的服务器环境里并没有运行你的GraphQL服务，这里的localhost指向的是Vercel服务器本身，自然会触发连接拒绝的错误。

解决方案 #

你需要用环境变量来管理不同环境的GraphQL端点，避免硬编码本地地址：

1. 配置本地开发环境变量
   在Next.js项目根目录创建.env.local文件，添加本地GraphQL服务的地址：

GRAPHQL_ENDPOINT=http://localhost:4000/

2. 配置Vercel生产环境变量
   登录Vercel控制台找到你的项目：

• 进入「Settings」→「Environment Variables」
• 添加名为GRAPHQL_ENDPOINT的变量，值填写你的GraphQL服务的公网访问地址（比如https://your-deployed-graphql-api.com/）

3. 修改代码使用环境变量
   把硬编码的端点替换为环境变量：

import { gql, request } from "graphql-request";

export async function getServerSideProps(context) {
  // 从环境变量读取GraphQL端点
  const endPoint = process.env.GRAPHQL_ENDPOINT;

  const query = gql`
    query {
      exactlyUser(id: "63c3cf0aea56b467893c92d3") {
        username
      }
    }
  `;

  const data = await request(endPoint, query);

  return {
    props: {
      data: data,
    },
  };
}

额外检查点 #

• 确保你的GraphQL服务已部署到公网，且Vercel服务器可以正常访问它（无防火墙或IP白名单限制）
• 确认Vercel的环境变量已正确保存，变量名和代码中使用的完全一致
• 如果你的GraphQL服务需要认证，记得在请求中添加对应的认证信息（比如请求头）

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