Cannot run Server Actions in GitHub Codespaces or VSCode Tunnel

[waki285]

Link to the code that reproduces this issue

https://github.com/waki285/Server-Actions-Bug

To Reproduce

1. Clone the repository in GitHub Codespaces or VSCode Tunnel.
2. Start the server with next dev.
3. Codespaces (or VSCode Tunnel) will automatically perform port forwarding and you can access the launched website through it.
4. Click the "Execute Server Actions" button.
5. An error will occur.

Current vs. Expected behavior

Expected:
Server Actions are executed successfully and no errors occur.

Current:
The following error occurs

`false` header with value `********-3000.***.devtunnels.ms` does not match `origin` header with value `localhost:3000` from a forwarded Server Actions request. Aborting the action.
 ⨯ Error: Invalid Server Actions request.
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at AsyncLocalStorage.run (node:async_hooks:346:14)

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #25-Ubuntu SMP Wed Mar 30 15:54:22 UTC 2022
Binaries:
  Node: 20.9.0
  npm: 10.2.2
  Yarn: N/A
  pnpm: 8.10.2
Relevant Packages:
  next: 14.0.2-canary.11
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

No response

[Georgerowberry]

Having the same issue here, middleware CORS not helping either

[danieltott]

I'm having this issue with a host that is being served behind an apache ProxyPass/ProxyPassReverse

[lucienbl]

Hello,

I had the same issue after upgrading from NextJS 13 to NextJS 14, my server is running behind an NGINX reverse proxy. Adding the following to the reverse proxy configuration resolved the issue :

proxy_set_header   Host               $host;
proxy_set_header   X-Real-IP          $remote_addr;
proxy_set_header   X-Forwarded-Proto  $scheme;
proxy_set_header   X-Forwarded-For    $proxy_add_x_forwarded_for;

I hope this can help you resolve the issue on your end by adapting this solution to Apache etc...

Best regards.

[danieltott]

So Next 14 added some more protection against CSRF attacks. However it caused this problem we're all running in to. #57529 allows us to specify a list of allowed forwarded hosts, and it was released in v14.0.2-canary.4

I was able to fix this without messing with the proxy settings (which are configured automatically (and correctly) by apache) by doing the following:

• Upgrade next to 14.0.2-canary.4
• Add this to next.config:

experimental: {
  serverActions: {
    // edit: updated to new key. Was previously `allowedForwardedHosts`
    allowedOrigins: ['my-forwarded-host.com'],
  },
},

[njfdev]

I also had this issue and have confirmed that this works with GitHub Codespaces.

So Next 14 added some more protection against CSRF attacks. However it caused this problem we're all running in to. #57529 allows us to specify a list of allowed forwarded hosts, and it was released in v14.0.2-canary.4

I was able to fix this without messing with the proxy settings (which are configured automatically (and correctly) by apache) by doing the following:

• Upgrade next to 14.0.2-canary.4
• Add this to next.config:

experimental: {
  serverActions: {
    allowedForwardedHosts: ['my-forwarded-host.com'],
  },
},

[waki285]

do i need to include subdomains?

So Next 14 added some more protection against CSRF attacks. However it caused this problem we're all running in to. #57529 allows us to specify a list of allowed forwarded hosts, and it was released in v14.0.2-canary.4

I was able to fix this without messing with the proxy settings (which are configured automatically (and correctly) by apache) by doing the following:

• Upgrade next to 14.0.2-canary.4
• Add this to next.config:

experimental: {
  serverActions: {
    allowedForwardedHosts: ['my-forwarded-host.com'],
  },
},

[SAMXPS]

Hello, I am having the same issue here with Nginx proxy. Tried to Upgrade next to 14.0.2-canary.4 and add allowedForwardedHosts but it is not working. Any documentation on how to set up allowedForwardedHosts correctly ?

[njfdev]

Hello, I am having the same issue here with Nginx proxy. Tried to Upgrade next to 14.0.2-canary.4 and add allowedForwardedHosts but it is not working. Any documentation on how to set up allowedForwardedHosts correctly ?

Not sure if there is any documentation, especially because it is not a full release yet. But you should be able to add this to your next.config.js and replace my-forwarded-host.com with the full domain (including subdomains) of your website being ran through the proxy:

experimental: {
  serverActions: {
    allowedForwardedHosts: ['my-forwarded-host.com'],
  },
},

[corywatsonhcl]

After upgrading to 14 I'm running into the same issue with a Next app being deployed via Docker. If I statically set a hostname using docker run or docker compose locally I can map it using allowedForwardedHosts and it works. However, when deploying to a cloud provider I don't have any control over the hostname. I do have the hostname available via an env variable, but as far as I can tell I can't use an env var in next.config.js. Any ideas on how to handle that situation?

[danieltott]

After upgrading to 14 I'm running into the same issue with a Next app being deployed via Docker. If I statically set a hostname using docker run or docker compose locally I can map it using allowedForwardedHosts and it works. However, when deploying to a cloud provider I don't have any control over the hostname. I do have the hostname available via an env variable, but as far as I can tell I can't use an env var in next.config.js. Any ideas on how to handle that situation?

If you manually install dotenv you can use env variables here! As long as they're the same at build time as run time that should work just fine 👍

[corywatsonhcl]

After upgrading to 14 I'm running into the same issue with a Next app being deployed via Docker. If I statically set a hostname using docker run or docker compose locally I can map it using allowedForwardedHosts and it works. However, when deploying to a cloud provider I don't have any control over the hostname. I do have the hostname available via an env variable, but as far as I can tell I can't use an env var in next.config.js. Any ideas on how to handle that situation?

If you manually install dotenv you can use env variables here! As long as they're the same at build time as run time that should work just fine 👍

@danieltott the issue is that with a cloud platform, I won't know the container host name until the container is run, which will be after the build was run to create the Docker image. It seems therefore that this approach is incompatible with output: standalone and that I'll need to use npm start to be able to use the env vars. That's unfortunate.

[timneutkens]

We've added an option experimental.serverActions.allowedOrigins in #58023 that allows you to add a list of allowed hosts. The reason it throws by default is that this is a layer of cross site request forgery protection.

Shu is currently out of office till next week but we'll add support for wildcard patterns once he's back.

[djpiper28]

Hello, I am having the same issue here with Nginx proxy. Tried to Upgrade next to 14.0.2-canary.4 and add allowedForwardedHosts but it is not working. Any documentation on how to set up allowedForwardedHosts correctly ?

I set my allowed host for the hostname of the gateway of my the k8 cluster. I'm assuming with an nginx you can try localhost, 127.0.0.1 or 0.0.0.0 probably