x-forwarded-host header with value does not match origin header.

[stefanosandes]

Summary

Hello, everyone!

I have a Next application behind a proxy using Vercel's guide to create multi zones.

In the root project, I have a Next application with rewrites configured in next.config.js. In the other project, I have another Next application with the basePath set to a subpath on the main domain.

Everything works great. Assets are loaded correctly, and images work with a small workaround.

The problem arises with Server Actions. When I try to call a server action, I receive the following error:

x-forwarded-host header with value <my_vercel_project_domain> does not match origin 
header with value <my_custom_domain> from a forwarded Server Actions request.

The general idea is to have multiple applications working on subpaths of a main domain.

The recommendation in these cases is to add my custom domain to the allowedOrigins configuration. However, the problem is that my application will have multiple domains assigned to it, one domain per customer, and I can't hardcode a new domain for every new customer.

I tried using a wildcard there (and I could handle security measures in middleware where I have a list of domains from the database), but as shown in this code snippet, it is not allowed:

next.js/packages/next/src/server/app-render/csrf-protection.ts

Lines 25 to 39 in 0c21654

	switch (patternPart) {
	case '':
	case '*':
	case '**': {
	// invalid pattern. pattern segments must be non empty
	// Additionally wildcards are only supported below the domain level
	return false
	}
	default: {
	if (domainPart !== patternPart) {
	return false
	}
	}
	}
	}

Has anyone encountered or solved this kind of scenario?

Additional information

No response

Example

No response

[tselmek]

I have this exact same issue with Next 14.2.6. I've tried adding <my_vercel_project_domain> and <my_custom_domain> to the list of allowed forwarded hosts and allowed origins in my Next config but the error is still here.

[tapan-storetools]

I've been struggling with the same issue for the past few days. Today i finally found a solution which includes creating a middleware in nextjs

import { NextApiResponse } from "next";
import { NextResponse, NextRequest } from "next/server";


type NextApiHandler = (req: NextRequest, res: NextApiResponse) => Promise<void>;

const actionHeaderCheckOverride = async (
  req: NextRequest,
  res: NextApiResponse,
  next: NextApiHandler,
): Promise<any> => {
  console.debug("REQUEST HEADERS:::: ", req.headers);

  
  const response = NextResponse.next();
  response.headers.set(
    "x-forwarded-host",
    req.headers.get("origin")?.replace(/(http|https):\/\//, "") || "*",
  );
  return response;
}

The above code rewrites the header x-forwarded-host with req.origin , which essentially matches origin with x-host-forwarded header. So that your nextjs action can execute after passing the check.
Hope this helps :)