next.js 解决 `x-forwarded-host` header does not match `origin` header with value from a forwarded Server Actions request

在 GitHub codespaces 上开发 next.js 项目，端口穿透出来后访问，结果报错：

`x-forwarded-host` header does not match `origin` header with value from a forwarded Server Actions request.

解决方案：

1. 如果需要，首先更新 next.js 。参见 https://nextjs.org/docs/messages/version-staleness ，运行命令：

pnpm add next@latest

这应当是不会报错了。但如果您像笔者一样使用了 ppr: true ，就应当使用 canary 版本，不然后续可能会出错。

1. 修改 next.config.js ，添加 experimental.serverActions.allowedOrigins 。

例如我这里：

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  /* config options here */
  experimental: {
    serverActions: {
      allowedOrigins: [
        'localhost:3000', // localhost
        'super-duper-space-*****-*****-3000.app.github.dev', // Codespaces
      ],
    },
    ppr: true,
  },
  images: {
    remotePatterns: [
      {
        hostname: 'avatar.vercel.sh',
      },
    ],
  },
};

export default nextConfig;

然后重新启动后就能成功访问了。