在Github Codespaces运行Vercel AI Chatbot遇请求头不匹配错误求助

问题描述 #

运行Vercel AI Chatbot示例时触发错误：

转发的Server Actions请求中，值为foobar-3000.app.github.dev的x-forwarded-host请求头与值为localhost:3000的origin请求头不匹配，正在终止操作。

修改layout.tsx中的metadataBase配置无法解决问题，该配置仅影响页面元数据，不涉及Server Actions的安全校验逻辑。

解决方案 #

方案1：配置Next.js信任主机与跨域头（推荐） #

在项目根目录修改next.config.js，添加信任主机和跨域头配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
    trustedHosts: ['*.app.github.dev'], // 信任所有GitHub Codespaces域名
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Access-Control-Allow-Origin',
            value: process.env.CODESPACE_DOMAIN ? `https://${process.env.CODESPACE_DOMAIN}` : 'http://localhost:3000',
          },
          {
            key: 'Access-Control-Allow-Credentials',
            value: 'true',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

原理：trustedHosts让Next.js认可Codespaces的域名，避免主机校验拦截；headers统一设置允许的Origin，确保请求头匹配。

方案2：通过环境变量统一应用域名 #

在Codespaces的环境变量中添加：

NEXT_PUBLIC_APP_URL=https://foobar-3000.app.github.dev

修改应用中发起Server Actions请求的逻辑，使用该环境变量作为请求的Origin（若使用自定义fetch逻辑），确保与x-forwarded-host一致。

方案3：临时禁用Server Actions头校验（仅测试用） #

在next.config.js中关闭安全校验（不建议生产环境使用）：

const nextConfig = {
  experimental: {
    serverActions: {
      allowedOrigins: ['*'],
    },
  },
};

验证 #

修改完成后重启Codespaces中的应用服务，重新触发Server Actions，检查错误是否消失。

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