CORS issue?

default discord avatar
ssyberg2 years ago
1 2

I've tried adding a domain to the csrf whitelist but I'm still not seeing an Access-Control-Allow-Origin header being supplied by the server and my vue app is complaining. Do I need to explicitly add this header?

  • Selected Answer
    discord user avatar
    DanRibbens
    2 years ago

    The Access-Control-Allow-Origin header should be included automatically in the API after you have added it to your config.

    Could you share what you you have in your Payload config for CSRF? Perhaps you're setting it as a string and not in a an array?
    Could it be that you're using an env variable that isn't available with your deployment?

    I'm happy to look if you have more info to share, thanks!

    7 replies
  • default discord avatar
    ssyberg2 years ago

    The Access-Control-Allow-Origin header should be included automatically in the API after you have added it to your config.

    As in this should have been added as soon as I populated the csrf config? That's kind of what I was assuming would happen but it sure didn't seem to do it.

    Could you share what you you have in your Payload config for CSRF?

      csrf: [
        'http://localhost:8080'
      ]
    
  • default discord avatar
    ssyberg2 years ago

    I'll just provide the whole thing, nothing secret here:

    export default buildConfig({
      serverURL: 'http://localhost:3000',
      admin: {
        user: Users.slug,
      },
      collections: [
        Informationals,
        Users,
        Medias
      ],
      csrf: [
        'http://localhost:8080'
      ]
    });
    
  • discord user avatar
    DanRibbens
    2 years ago

    @ssyberg Thanks for sharing your config. The csrf should be your domain and you can add cors too. We need to tell the Payload API (serverURL, localhost:3000) to allow requests from localhost:8080, the vue app.

    export default buildConfig({
      serverURL: 'http://localhost:3000',
      admin: {
        user: Users.slug,
      },
      collections: [
        Informationals,
        Users,
        Medias
      ],
      csrf: [
        'http://localhost:8080'
      ],
      cors: [
         'http://localhost:8080'
       ]
    });

    Does that help?

  • default discord avatar
    ssyberg2 years ago

    Oh! I don't think I saw that documented, but it's possible I missed it.

  • default discord avatar
    ssyberg2 years ago

    ACK nm I see it now.

  • discord user avatar
    jmikrut
    2 years ago

    For a little bit of context here, the csrf config property does not affect CORS whatsoever—instead it's meant to protect your API against cross-site request forgery attacks.

    For security, we use HTTP-only cookies (many other headless CMS do not!) so we're protected from many XSS attacks, but HTTP-only cookies can still be vulnerable to CSRF type attacks.

    To prevent against this, we require developers to manually whitelist domains that they will allow requests to be authenticated from using our HTTP-only cookie using the csrf property of the Payload config. If you are only authenticating via your Payload admin panel, then this does not apply to you. But, if you are using Payload authentication in your own apps and they run on different domains from your Payload API, you might want to whitelist the domains that your own app(s) are running on so that Payload allows access to the HTTP-only cookie accordingly.

    It's a pretty neat security measure.

    Then, like you've found, the cors property is actually the one you were looking for. Happy to hear you're up and running!

  • default discord avatar
    ahmetskilinclast year

    @DanRibbens I've made my config to be same as above, but I'm still getting a CORS error.

    serverURL: process.env.PAYLOAD_PUBLIC_BASE_DNS,
    admin: {
      user: Users.slug,
    },
    collections: [...],
    globals: [...],
    plugins: [addCloudinary],
    cors: ["http://localhost:3001"],
    csrf: ["http://localhost:3001"],

    Is there something I'm missing? I keep getting CORS error from my NextJS app trying to make PUT requests into a collection, however, it works from Postman.

  • default discord avatar
    ssyberg2 years ago

    UPDATE: I misread the docs / am a CORS noob and this is not needed, see the correct reply below!

    JFYI if anyone else comes across this, I solved by explicitly adding the cors package and adding to the server config. I'm pretty sure that app.use has to be called before the payload.init which I'm guessing adds all the routing

    var cors = require('cors');
    var corsOptions = {
      origin: 'http://localhost:8080',
      credentials: true,
      optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
    }
    
    app.use(cors(corsOptions));
    
    3 replies
    discord user avatar
    jmikrut
    2 years ago

    Note for anyone else that sees this: Payload does not require you to use the third-party cors package. Instead, just use the cors property on the Payload config and you'll be good to go!

    default discord avatar
    revnelson4 months ago

    @jmikrut How can we set custom headers (access-control-allow-headers)?

    default discord avatar
    dkonsoftware3 months ago

    Hope it helps: #4384

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.