next.js: Cannot run Server Actions in GitHub Codespaces or VSCode Tunnel

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.

So Next 14 added some more protection against CSRF attacks. However it caused this problem we’re all running in to. https://github.com/vercel/next.js/pull/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'],
  },
},

upgraded to 14.0.2 and added

module.exports = {
    experimental: {
        serverActions: {
            allowedOrigins: ["localhost:3000", "demo.your-actual-domain.com],
        },
    },
}

solved my problem

None of these options work for me, Next.js seems to ignore the allowOrigins property. Is there any other workaround, or even a way to just disable this security feature?

experimental: {
    serverActions: {
      allowedOrigins: ["xxxxxxxx-3000.xxx.devtunnels.ms" /* or Codespace port forward url, no including scheme */, "localhost:3000"]
    }
  }

I have been able to confirm that this solves the problem.

not work in VSCode Tunnel. I tried both:

experimental: {
    serverActions: {
      allowedForwardedHosts: ["localhost", "xxxxxxxx-3000.xxx.devtunnels.ms"],
      allowedOrigins: ["xxxxxxxx-3000.xxx.devtunnels.ms", "localhost:3000"]
    }
  }

experimental: {
  serverActions: {
    allowedForwardedHosts: ["localhost", "xxxxxxxx-3000.xxx.devtunnels.ms"],
    allowedOrigins: ["https://xxxxxxxx-3000.xxx.devtunnels.ms", "localhost:3000"]
  }
}

error:

`x-forwarded-host` header with value `xxxxxxxx-3000.xxx.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)

This is working for me in Codespaces with Next.js 14.1.0:

if (process.env.NODE_ENV == 'development') {
    module.exports = {
        experimental: {
            serverActions: {
                allowedOrigins: ['localhost:3000'],
            },
        },
    }
}

@waki285 Sorry but this is not completed: We still cant use wildacrds in allowOrigins.

@timneutkens @meleyal

Sorry, I copied and pasted the Origin in Request Headers directly into allowedOrigins and it worked!

Could you please share an example of the version of the configuration that worked for you?

/** @type {import("next").NextConfig} */
module.exports = {
    experimental: {
        serverActions: {
            allowedOrigins: ["demo.example.com:3000"],
        },
    },
}

this worked for me

Following on from this comment using 14.0.3-canary.5 and allowedOrigins works, note that you are not to include http or https protocols, but just have the domain name.

Hopefully there’s some official docs that come with the future releases.

Sorry, I copied and pasted the Origin in Request Headers directly into allowedOrigins and it worked!

Could you please share an example of the version of the configuration that worked for you?

/** @type {import("next").NextConfig} */
module.exports = {
    experimental: {
        serverActions: {
            allowedOrigins: ["demo.example.com:3000"],
        },
    },
}

this worked for me

This commit adds wildcard support : https://github.com/vercel/next.js/commit/6fbff29a2e312eee0c129184aee4105b6a186771

Available in canary for now.

BTW, this issue will make the vercel platforms example not work https://demo.vercel.pub/platforms-starter-kit

Is this a way to set this options in .env? I don’t want to commit next.config.js with my personal codespace domain.

You can use process.env.MY_VAR in your next config

This is affecting me and I’m not even using server actions just route handlers & middleware. Multi tenant saas app. When I dump out the request object headers nextjs seems to be modifying the x-forwarded-host header value and lieing about what it was actually sent as? And this was shipped in a 0.0.1 update? Uhhh…

Reverting to 14.0.1 fixes issue.

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

@timneutkens any update on wildcard support?

@devraj thanks, but to me the PR seems to only cover a fixed list of origins. See this part of the code :

if (serverActions?.allowedOrigins?.includes(originDomain)) {

And I did not see any mention of wildcard support. Did I miss something ?

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'],
  },
},

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