diff --git a/README.md b/README.md index 7a88c2c..9358a70 100644 --- a/README.md +++ b/README.md @@ -221,3 +221,15 @@ I'm the developer behind Developers Digest. If you find my work helpful or enjoy - **Website**: Check out my website at [developersdigest.tech](https://developersdigest.tech) - **Github**: Follow me on GitHub at [github.com/developersdigest](https://github.com/developersdigest) - **Twitter**: Follow me on Twitter at [twitter.com/dev__digest](https://twitter.com/dev__digest) + +## Troubleshooting + +### GitHub Codespaces: "x-forwarded-host" does not match "origin" + +If you run this in GitHub Codespaces you may see: + +- `x-forwarded-host header ... does not match origin header ...` +- `Error: Invalid Server Actions request.` + +This is caused by Next.js Server Actions CSRF protection when the app is behind a proxy. +This repo includes a `next.config.mjs` that allows Codespaces forwarded hosts. diff --git a/next.config.mjs b/next.config.mjs new file mode 100644 index 0000000..742a237 --- /dev/null +++ b/next.config.mjs @@ -0,0 +1,26 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + // Fix for GitHub Codespaces (and other proxy setups) where Server Actions + // requests may arrive with forwarded hosts that don't match the `origin` + // header. Next.js blocks these by default for CSRF protection. + // + // Next.js 14.1.x expects this under `experimental.serverActions`. + // See: https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions#allowedorigins + experimental: { + serverActions: { + allowedOrigins: [ + // local dev + 'localhost', + '127.0.0.1', + + // GitHub Codespaces + '*.app.github.dev', + + // Vercel preview/prod (VERCEL_URL is e.g. "my-app.vercel.app") + ...(process.env.VERCEL_URL ? [process.env.VERCEL_URL] : []), + ], + }, + }, +}; + +export default nextConfig;