CORS error after deployment even after setting permissions
I'm trying to access my endpoint from a next.js app deployed on vercel, and I keep getting a cors error, even after setting cors="*" in payload.config and trying to whitelist my domain on csrf.
From the browser and from the curl command it works fine, so It really looks like a cross-origin error.
I used Railway to deploy my payloadCMS backend.
The error is on the image. Any help is appreciated.
What's in your console?
you're showing the issues tab, but can you show the console tab?
and, you should check your Railway server logs
instead of saying cors=* you should just whitelist all domains that you'll be accessing from. Because you can't have cors=* and still allow cookie auth at the same time
In my console is this
ahh good ol' axios
i can't find anything noteworthy from all of that info
haha
scrolling down, is there more?
This is all, unfortunately
Can't find anything noteworthy as well.. And I'm still looking for the server logs on Railway
first time using it
Even changing CORS to specific domains and removing csrf it keeps bringing the same error
Man, I was relying on the cors property on payload config
and it was not working
just as a desperate act before giving up and going to bed, I added the express middleware for cors handling
and it worked
i also have a problem with allowing cors="*" as well (useful for staging API with PR deployments for frontend), even with express middleware
cors.
How did you get it to work? @Lucas Delbel
hey @bombnp , I'm still not sure what actually worked, I'll check tomorrow.
But what I did was simply adding the middleware and the options for cors
and I kept the cors configuration on payload.config
ahh, mine didn't have
app.options('*', cors()). Maybe that's why?
guess i'll try out later
Maybe, that's what I was going to check
is it safe to use cors middleware and payloads auth?
depending on what you're looking to do with cors middleware
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentialsthis is not a Payload thing, it's just an internet thing
so, if i want to use PR deployments (like Netlify's), which deploys a version of my website when I make a PR with different origins, and I want to connect it to my backend. How should I set the cors? I always get cors error since it's different origin and the origin from PR deployments are always different.
Or maybe it's not possible?
Is it possible to create a new middleware? Then look up domains from a cache and write an alternative to the cors build-in payload middleware.
Can the idea be to look up CORS? Using origin and check that tokens belong to the same origin. Implement the separation between accounts to avoid exploitation of others' accounts.
unset config.cors and add
middleware:
res.header('Access-Control-Allow-Methods', 'PUT, PATCH, POST, GET, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization, Content-Encoding, x-apollo-tracing'); if (corsTokenBelongsToOrigin(req.headers.origin, token) ) { res.header("Access-Control-Allow-Credentials", "true"); res.setHeader("Access-Control-Allow-Origin", req.headers.origin); }Are you using the Payload API from a server render? else you can just add your public domain to cors and csrf?
you mean payload local api? then no. My website frontend (nextjs) and payload are deployed separately on different domain (for now). I'm thinking about merging them into single express app though.
Do you have a domain for your Nextjs app? If so, add that domain to your payload config cors, not the domain of the local container.
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.