CODESPACE ERROR: x-forwarded-host header with value xxx-3000.app.github.dev does not match origin header with value localhost:3000 from a forwarded Server Actions request. Aborting the action.

[bandinopla]

Running this from a fork on github codespaces throws that error when sending a chat message...
I added this to see if it made it work, but it doesn't.
Any idea?

//layout.tsx
export const metadata = {
  metadataBase: process.env.VERCEL_URL
  ? new URL(`https://${process.env.VERCEL_URL}`)
  : process.env.CODESPACES
             ? new URL(`https://${process.env.CODESPACE_NAME}-3000.github.dev`) // Construct the Codespace-specific URL
             : new URL('http://localhost:3000'),
}

//next.config.js
/** @type {import('next').NextConfig} */
module.exports = { 
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: process.env.CODESPACES
          ? [
              {
                key: 'X-Forwarded-Host',
                value: `${process.env.CODESPACE_NAME}-3000.github.dev`,
              },
              {
                key: 'Access-Control-Allow-Origin',
                value: `https://${process.env.CODESPACE_NAME}-3000.github.dev`,
              },
            ]
          : [],
      },
    ]
  }, 
}

[bajoski34]

any update here ?

[arfa123]

also facing same problem, I am also using Github Codespace and unable to test server actions, please guide us

[arfa123]

Running this from a fork on github codespaces throws that error when sending a chat message... I added this to see if it made it work, but it doesn't. Any idea?

//layout.tsx
export const metadata = {
  metadataBase: process.env.VERCEL_URL
  ? new URL(`https://${process.env.VERCEL_URL}`)
  : process.env.CODESPACES
             ? new URL(`https://${process.env.CODESPACE_NAME}-3000.github.dev`) // Construct the Codespace-specific URL
             : new URL('http://localhost:3000'),
}

//next.config.js
/** @type {import('next').NextConfig} */
module.exports = { 
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: process.env.CODESPACES
          ? [
              {
                key: 'X-Forwarded-Host',
                value: `${process.env.CODESPACE_NAME}-3000.github.dev`,
              },
              {
                key: 'Access-Control-Allow-Origin',
                value: `https://${process.env.CODESPACE_NAME}-3000.github.dev`,
              },
            ]
          : [],
      },
    ]
  }, 
}

add "localhost:3000" in 'allowedOrigins' resolves your issue
experimental: { serverActions: { allowedOrigins: [ "localhost:3000", "xxx-3000.app.github.dev", ], }, }