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

Question

I'm trying to run the Vercel AI Chatbot example using Github Codespaces as my dev box and am encountering the same issue as described in this GitHub issue.

The error message is "x-forwarded-hostheader with valuefoobar-3000.app.github.devdoes not matchoriginheader with valuelocalhost:3000` from a forwarded Server Actions request. Aborting the action."

Initially I thought the problem was stemming from layout.tsx and tried to correct this issue as follows. But after monkeying around with it for a while I am now thinking the problem is occurring elsewhere in the application. Any suggestions would be greatly appreciated.

export const metadata = {
  metadataBase: process.env.VERCEL_URL
    ? new URL(`https://${process.env.VERCEL_URL}`)
    : new URL('foobar-3000.app.github.dev'),
  title: {
    default: 'Next.js AI Chatbot',
    template: `%s - Next.js AI Chatbot`
  },
  description: 'An AI-powered chatbot template built with Next.js and Vercel.',
  icons: {
    icon: '/favicon.ico',
    shortcut: '/favicon-16x16.png',
    apple: '/apple-touch-icon.png'
  }
}

Answer 1

Did you try the solution from arfa123?

In next.config.js

module.exports = {
  experimental: {
    serverActions: {
      allowedOrigins: [
        'localhost:3000', // localhost
        'foobar-3000.app.github.dev', // Codespaces
      ],
    },
  },
};

Documentation here