Next.js Discord

Discord Forum

CORS error only on preview deployments to Vercel

Unanswered
zestydoug posted this in #help-forum
Open in Discord
zestydougOP
On my Vercel Preview deployment (not production), when writting to my postgres database I am getting this error articles:1 Access to fetch at 'https://myapp.vercel.app/api/articles' from origin 'https://myapp-preview-deploy-url.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. even after trying all these different methods for setting the CORS policy: https://vercel.com/guides/how-to-enable-cors#enabling-cors-in-a-single-node.js-serverless-function

How do we set a specific URL for the CORS policy? I specified the domain on Firebase, but I do not see any fields to specify a different URL. I am assuming the CORS policy is not applying to the preview URLs.

Any ideas on why I can't set the CORS policy for preview deployments on Vercel?

12 Replies

Rafael Almeida
is the API in your own app? you shouldn't need to configure CORS for that, it is just fetching the wrong URL. you can use relative paths in the URL and the browser will autocomplete them with the correct origin. for example, instead of fetch('http://app.com/api/foo') just do fetch('/api/foo') and it will work regardless of the environment the app is hosted at
zestydougOP
Ahhh you know what, there is a bit of my code that I had as a work around for this:
  const res = await fetch(`${process.env.NODE_ENV === "development" ? SITE.URLS.TEST : SITE.URLS.LIVE}/api/articles`, {
      method: "GET",
      headers: { Cookie: cookies().toString() }, // These need to be sent to access the session
      next: { revalidate: 5 }, // TODO: change me on live to longer cache period
  });


but I had that there intentionally because it wasnt autofilling between localhost and the live URL. Is that fixed now? or is this the wrong workaround?
Rafael Almeida
this behavior only happens when the code is running in the browser. it looks like this snippet that you shared is running in a React Server Component so yeah you still need the full URL, but CORS isn't a thing in servers. you can omit the origin only when the code is running in a browser, which is causing the CORS errors
zestydougOP
Awesome, okay let me poke around rq and see if that fixes it
Rafael Almeida
btw you might not need to fetch your own API Route in server components: https://nextjs-discord-common-questions.joulev.dev/fetching-own-api-endpoint-in-react-server-components (this is just a suggestion not related to your question)
I changed the above snippet to:
    const res = await fetch(`/api/articles`, {
        method: "GET",
        headers: { Cookie: cookies().toString() }, // These need to be sent to access the session
        next: { revalidate: 5 }, // TODO: change me on live to longer cache period
    });

on my server components (let it for components using "use client") and now I am getting this error when fetching:
An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.
Other error in console: Uncaught Error: Minified React error #419; visit https://reactjs.org/docs/error-decoder.html?invariant=419 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Rafael Almeida
yeah you can't use relative URLs in RSC since they run in the server, you need to do it on the fetch calls that are happening in the browser, which is triggering the CORS errors
zestydougOP
Ahh okay I switched that logic up, one sec
zestydougOP
Alright so I think I understand, but now I am wondering how I am suppose to know the preview URL on server side without having to manually set it with SITE.URLS.LIVE? Is there a way for me to see that I am in a NODE_ENV of "preview", alongside "development" and "production"? Since I don't want my normal live URL to not work.
Broad-snouted Caiman
Did you manage to solve it?