vercel / platforms

A full-stack Next.js app with multi-tenancy and custom domain support. Built with Next.js App Router and the Vercel Domains API.
https://app.vercel.pub
5.38k stars 688 forks source link

Server Action rejected on localhost due to origin policy of Next.js 14 #352

Closed Xennis closed 7 months ago

Xennis commented 7 months ago

I followed https://github.com/vercel/platforms/discussions/341 and updated my project to Next.js 14. When saving a form the Server Action is triggered and the following error occurs:

`x-forwarded-host` header with value `localhost:3000` does not match `origin` header with value `app.localhost:3000` from a forwarded Server Actions request. Aborting the action.
 ⨯ Error: Invalid Server Actions request.
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at AsyncLocalStorage.run (node:async_hooks:338:14)

This seems to make sense in the context of the Next.js update. https://nextjs.org/blog/security-nextjs-server-components-actions describes it:

As an additional protection Server Actions in Next.js 14 also compares the Origin header to the Host header (or X-Forwarded-Host). If they don't match, the Action will be rejected.

As workaround it works to configure the allowedOrigins in the next.config.js:

const nextConfig = {
  experimental: {
    serverActions: {
      allowedOrigins: ["app.localhost:3000"],
    },
  },
}

This happens only in my copy of the platforms code. In the original code (which was just updated to Next.js 14 https://github.com/vercel/platforms/commit/841619c772664574c0f7c8836102631cfafb137d ) it seems to work without this workaround.

Any idea why this is the case? :-)