Next.js 14.0.2 x-forwarded-host header with value localhost:3000 does not match origin – Fix

By Raddy in Other · 15th December 2023

If you encounter the ‘x-forwarded-host’ header mismatch error while utilizing Server Actions in Next.js 14.0.2 (self-hosted on Linux Ubuntu with Nginx), specifically when the ‘x-forwarded-host’ header value is ‘localhost:3000’ and does not align with the ‘origin’ header value, this solution aims to address and resolve the issue.

Error: x-forwarded-host header with value localhost:3000 does not match origin header with value.

The way I managed to spot and debug the issue was by opening “pm2 monit” and triggering a server action – in this case, updating a record.

Fix

Here is what worked for me. You need to add allowedOrigins in experimental, serverActions:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: {
      allowedOrigins: ["website.com", "localhost:3000"]
    }
  }
}

module.exports = nextConfig

For more, follow this Github thread.

Author

Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]

Previous Post in Category