CORS issue?

ssyberg

last year

1 2

• Selected Answer
  

  DanRibbens

  Payload Team

  last year

  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
• 

  ssyberg

  last year

  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'
    ]
  

• 

  ssyberg

  last year

  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'
    ]
  });
  

• 

  DanRibbens

  Payload Team

  last year

  @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?

• 

  ssyberg

  last year

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

• 

  ssyberg

  last year

  ACK nm I see it now.

• 

  jmikrut

  Payload Team

  last year

  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!

• 

  ahmetskilinc

  8 months ago

  @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.

• 

  ssyberg

  last year

  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));
  

  1 reply
  

  jmikrut

  Payload Team

  last year

  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!