Suspected mismatch between NEXT_PUBLIC_VERCEL_URL and production origin
Answered
Sloth bear posted this in #help-forum
Sloth bearOP
Hey guys,
We've got our app deployed on
From the client (via a client component)*, we're using
But we're running into CORS issues, which is unexpected because these should be from the same origin. When we looked further into devtools, we saw that our api calls were going to a staging route - something like:
Why aren't the requests going to
Thanks 🙂
We've got our app deployed on
app-name.vercel.app, with a few route handlers defined, which should be accessible via appname.vercel.app/api/route-name.From the client (via a client component)*, we're using
process.env.NEXT_PUBLIC_VERCEL_URL to make requests to our api, i.e.fetch(`${process.env.NEXT_PUBLIC_VERCEL_URL}/api/route-name`)But we're running into CORS issues, which is unexpected because these should be from the same origin. When we looked further into devtools, we saw that our api calls were going to a staging route - something like:
appname-paysg5aes-appname.vercel.app/api/route-name.Why aren't the requests going to
appname.vercel.app/api/route-name? Is this expected? When I test in the browser, I can make calls to appname.vercel.app/api/route-name just fine.Thanks 🙂
Answered by Sloth bear
I think I've found it - turns out you're not supposed to use
I think the best pattern is to omit the host, or to configure CORS to accept traffic from domains that match
I don't think there is reliable way to get the server's host.
source: https://github.com/vercel/next.js/discussions/46216#discussioncomment-5081590
NEXT_PUBLIC_VERCEL_URL this way, since it'll alwayse use the generated deployment URL (https://vercel.com/docs/concepts/deployments/generated-urls), which is structured as:<project-name>-<unique-hash>-<scope-slug>.vercel.appI think the best pattern is to omit the host, or to configure CORS to accept traffic from domains that match
*-appname.vercel.app.I don't think there is reliable way to get the server's host.
source: https://github.com/vercel/next.js/discussions/46216#discussioncomment-5081590
7 Replies
Golden-winged Warbler
just a hunch, but did the build step inject the staging value?
if you drop the host from the fetch, it should use the current host, such that you don't even need to have that variable in the string or app. It means that no matter where you deploy, the fetch will hit the server the code came from
if you drop the host from the fetch, it should use the current host, such that you don't even need to have that variable in the string or app. It means that no matter where you deploy, the fetch will hit the server the code came from
Sloth bearOP
@Golden-winged Warbler we've gone ahead and dropped the host as a mitigation. It would still be nice to figure out why this is the happening though (and if it is expected behaviour).
As far as the suggestion about the build step - I don't think the docs (https://vercel.com/docs/concepts/deployments/generated-urls) are clear about where the value is injected.
As far as the suggestion about the build step - I don't think the docs (https://vercel.com/docs/concepts/deployments/generated-urls) are clear about where the value is injected.
Sloth bearOP
I think I've found it - turns out you're not supposed to use
I think the best pattern is to omit the host, or to configure CORS to accept traffic from domains that match
I don't think there is reliable way to get the server's host.
source: https://github.com/vercel/next.js/discussions/46216#discussioncomment-5081590
NEXT_PUBLIC_VERCEL_URL this way, since it'll alwayse use the generated deployment URL (https://vercel.com/docs/concepts/deployments/generated-urls), which is structured as:<project-name>-<unique-hash>-<scope-slug>.vercel.appI think the best pattern is to omit the host, or to configure CORS to accept traffic from domains that match
*-appname.vercel.app.I don't think there is reliable way to get the server's host.
source: https://github.com/vercel/next.js/discussions/46216#discussioncomment-5081590
Answer
Golden-winged Warbler
My solution is to not use Vercel for hosting, too much forcing you to build/deploy a certain way because they have a certain product(s) to sell at a steep markup
Giant panda
When you are fetching from the client-side you don't need a URL prefix
Just use
/api/foo directlyGolden-winged Warbler
I think the best pattern is to omit the host
I believe this is what OP settled on