Like what we’re doing? Star us on GitHub!

CORS error after deployment even after setting permissions

Lucas Delbel
4 weeks ago
34

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.

image.png
  • jmikrut
    Payload Team
    4 weeks ago

    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

  • Lucas Delbel
    4 weeks ago

    In my console is this

    image.png
  • jmikrut
    Payload Team
    4 weeks ago

    ahh good ol' axios



    i can't find anything noteworthy from all of that info



    haha



    scrolling down, is there more?

  • Lucas Delbel
    4 weeks ago

    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

  • bombnp
    4 weeks ago

    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

  • Lucas Delbel
    4 weeks ago

    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

  • bombnp
    4 weeks ago

    ahh, mine didn't have

    app.options('*', cors())

    . Maybe that's why?



    guess i'll try out later

  • Lucas Delbel
    4 weeks ago

    Maybe, that's what I was going to check

  • Martin R
    4 weeks ago

    is it safe to use cors middleware and payloads auth?

  • jmikrut
    Payload Team
    4 weeks ago

    depending on what you're looking to do with cors middleware



    https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials


    this is not a Payload thing, it's just an internet thing

  • bombnp
    4 weeks ago

    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?

  • Martin R
    4 weeks ago

    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?

  • bombnp
    4 weeks ago

    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.

  • Martin R
    4 weeks ago

    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.

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More