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

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

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

解决方案：

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

1
pnpm add next@latest

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

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

例如我这里：

1
import type { NextConfig } from 'next';
2

3
const nextConfig: NextConfig = {
4
  /* config options here */
5
  experimental: {
6
    serverActions: {
7
      allowedOrigins: [
8
        'localhost:3000', // localhost
9
        'super-duper-space-*****-*****-3000.app.github.dev', // Codespaces
10
      ],
11
    },
12
    ppr: true,
13
  },
14
  images: {
15
    remotePatterns: [
16
      {
17
        hostname: 'avatar.vercel.sh',
18
      },
19
    ],
20
  },
21
};
22

23
export default nextConfig;

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

支持与分享

评论区

目录