Invalid Server Actions request for subdomain
Unanswered
Giant panda posted this in #help-forum
Giant pandaOP
I'm working on a multitenant platform that allows users to create their own spaces, such as user-slug.example.com. However, when I try to access server actions from these subdomains, I get the following error:
⨯ Error: Invalid Server Actions request.
Adding each subdomain to next.config.js works, but since user slugs are created dynamically, it's not feasible to add all of them manually. Using a wildcard (*) for the domain doesn't work either.
I also tried the middleware solution suggested in the documentation, but it didn't resolve the issue.
Can someone help me implement a solution for handling dynamic subdomains?
x-forwarded-host header with value example.com does not match origin header with value user-slug.example.com from a forwarded Server Actions request. Aborting the action.⨯ Error: Invalid Server Actions request.
Adding each subdomain to next.config.js works, but since user slugs are created dynamically, it's not feasible to add all of them manually. Using a wildcard (*) for the domain doesn't work either.
I also tried the middleware solution suggested in the documentation, but it didn't resolve the issue.
Can someone help me implement a solution for handling dynamic subdomains?
9 Replies
@Giant panda I'm working on a multitenant platform that allows users to create their own spaces, such as user-slug.example.com. However, when I try to access server actions from these subdomains, I get the following error:
`x-forwarded-host` header with value `example.com` does not match `origin` header with value `user-slug.example.com` from a forwarded Server Actions request. Aborting the action.
⨯ Error: Invalid Server Actions request.
Adding each subdomain to next.config.js works, but since user slugs are created dynamically, it's not feasible to add all of them manually. Using a wildcard (*) for the domain doesn't work either.
I also tried the middleware solution suggested in the documentation, but it didn't resolve the issue.
Can someone help me implement a solution for handling dynamic subdomains?
the only way i could find is to use the multi tenancy mechanism that you already implemented to fake the origin of the server action request: https://nextjs-forum.com/post/1249279261689380885
this way you lose the csrf protection, so you need to implement csrf protection yourself.
this way you lose the csrf protection, so you need to implement csrf protection yourself.
Giant pandaOP
Damn...
I'm kind of bad with thinks like cors etc.
Do i understand correctly, you just add this code as a utils function for example, and call it instead of the normal fetch?
And i would have to replace the origin "debug-git-server-action-joulev-proj" with my dynamic value, right?
I'm kind of bad with thinks like cors etc.
Do i understand correctly, you just add this code as a utils function for example, and call it instead of the normal fetch?
And i would have to replace the origin "debug-git-server-action-joulev-proj" with my dynamic value, right?
@Giant panda Damn...
I'm kind of bad with thinks like cors etc.
Do i understand correctly, you just add this code as a utils function for example, and call it instead of the normal fetch?
And i would have to replace the origin "debug-git-server-action-joulev-proj" with my dynamic value, right?
No no no.
That code is on the Cloudflare worker where I handle multi tenancy. Depending on how and where you handle multi tenancy, you need to significantly modify the code accordingly.
The gist here is that when you route requests based on the subdomain/custom domain, you need to modify the origin header so nextjs still thinks the request comes from the main app and not from subdomains.
That code is on the Cloudflare worker where I handle multi tenancy. Depending on how and where you handle multi tenancy, you need to significantly modify the code accordingly.
The gist here is that when you route requests based on the subdomain/custom domain, you need to modify the origin header so nextjs still thinks the request comes from the main app and not from subdomains.
Giant pandaOP
Hm I handle the multi tenancy on the middleware. I already tried to rewrite the header here as described in the documentation, but it’s also not working with wildcard domains or regex match pattern.
This sucks so hard …. -.-
This sucks so hard …. -.-
how do you handle multi tenancy in the middleware? can you post your code
Giant pandaOP
Sorry for the late reply, did not see your answer.
middleware.tsx => https://pastecode.io/s/5vxcwwwk
this is mainly the middleware of Vercel Platform starter kit: https://vercel.com/templates/next.js/platforms-starter-kit
middleware.tsx => https://pastecode.io/s/5vxcwwwk
this is mainly the middleware of Vercel Platform starter kit: https://vercel.com/templates/next.js/platforms-starter-kit
Giant pandaOP
Ah i got it 😇
i added this to the subdomain calls in middleware and now its working.
const requestHeaders = new Headers(req.headers);
requestHeaders.set(
"origin",
);
requestHeaders.set(
"x-forwarded-host",
process.env.NEXT_PUBLIC_ROOT_DOMAIN as string,
);
return NextResponse.rewrite(new URL(
request: {
headers: requestHeaders,
},
});
i added this to the subdomain calls in middleware and now its working.
const requestHeaders = new Headers(req.headers);
requestHeaders.set(
"origin",
https://${process.env.NEXT_PUBLIC_ROOT_DOMAIN},);
requestHeaders.set(
"x-forwarded-host",
process.env.NEXT_PUBLIC_ROOT_DOMAIN as string,
);
return NextResponse.rewrite(new URL(
/${hostname}${path}, req.url), {request: {
headers: requestHeaders,
},
});
thanks for the hint! 🤩
Cuvier’s Dwarf Caiman
Having the same problem ever since updating to Next 15 I keep getting this error for the production deployment but the app works locally