Next.js Discord

Discord Forum

CORS issues with Vercel Deployment

Unanswered
Burmese posted this in #help-forum
Open in Discord
BurmeseOP
Hey! So I have been searching for hours to try and find a solution for this and have had no luck whatsoever. Probably tried 100 different configurations.

So I had sites deployed on Netlify using this rewrite in next.config.js to proxy API requests to a graphql server: 

  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*/`
      }
    ]
  }


On the Netlify deployment, everything would go through fine! All Graphql requests through apollo just called the /api url and it would proxy to the server fine without any CORS errors. Now we are trying to move all of our sites over to vercel and when trying to use the exact same rewrite on the same apps its results in: 

Access to fetch at "API URL" (redirected from "App /api URL") from origin "APP URL" has blocked by CORS policy: Response to preflight request doesnt pass access control check: 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.


I have tried to use the enable CORS documentation on Vercel by using both the headers array in next.config.js as well as trying to use vercel.json headers and any combination of the two. Tried using middleware to add headers and still same issues. Just extremely confused why it would work fine on Netlify by Vercel seems to not work at all.

Any insight or guidance would be a huge help.

28 Replies

tafutada777
can u share the CORS error msg in Chrome Dev Tool and network tab?
BurmeseOP
There really isnt anything in the network tab, just says CORS error next to the request
tafutada777
seems like you(client js code) invokes the GraphQL endpoint at stg-api, while the origin is acapulcos.
BurmeseOP
The graphql endpoint it is calling on client side is just /api, thats what the (redirected from) portion is saying.
tafutada777
why is it visible from a web browser? it should be transparent from browsers.
BurmeseOP
Why is which part visibile ?

A current working site still being hosted on netlify using the same rewrite just shows the API call as /api instead of the full URL as it is in this error so that part im also not entirely sure why it doesnt work the same way on vercel using the same configuration
tafutada777
web browsers -> Next.js(vercel) -> GraphQL, so web browser never know GraphQL exists, but it is exposed to web brower, which could be security hole.
can i see Chrome Dev Tool network tab?
BurmeseOP
For working site or one giving error
tafutada777
error
BurmeseOP
Other portions of site are working fine because it uses some server side calls that dont have to deal with CORS, that URL specifically is using a client side call which is where the error is being seen. Have another example as well giving same error with different site but uses same configuration.
tafutada777
it is working. i don't see any errors in Chrome Dev Tool console. which part?
BurmeseOP
should be the /order-online page button in top right. If you are on mobile may need to type in manually as I havent re-added the button on mobile lol
or can click on an item from /menu and hit order online
Jk, clicking from menu item and going to order online uses cached data so doesnt trigger client side call. Had to refresh to get error to show agian
tafutada777
i got the said error. its security hole. graphql endpoint is leaking.
tafutada777
it returns 307 redirect instead of rewrite. why this happen?
BurmeseOP
That is where I am also confused, doesnt do that on Netlify :/
POST does not work?
some one says adding training / fixes
BurmeseOP
Wym POST does not work ?

And I did try that as well, didnt seem to make a difference but can try again I suppose.
tafutada777
If you're using trailingSlash: true, you also need to insert a trailing slash in the source parameter. If the destination server is also expecting a trailing slash it should be included in the destination parameter as well.
module.exports = {
  trailingSlash: true,
  async rewrites() {
    return [
      {
        source: '/blog/',
        destination: 'https://example.com/blog/',
      },
      {
        source: '/blog/:path*/',
        destination: 'https://example.com/blog/:path*/',
      },
    ]
  },
}
BurmeseOP
tried both configurations of trailing slash, still same issue :/
BurmeseOP
And ultimately right now the working site on Netlify does not use trailing slash at all.
tafutada777
weird. work-around is use of middleware, which can be used as a reverse proxy as well.
tafutada777
i found in other threads , vercel.json might work.