CORS issue?

[ssyberg]

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?

[DanRibbens]

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!

[DanRibbens]

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

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

[ssyberg]

ACK nm I see it now.

[jmikrut]

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]

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

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

[jmikrut]

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!

[revnelson]

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

[dkonsoftware]

Hope it helps: #4384

[thantheinthwin]

I added cors to Payload config but when cross origin request if made, payload is returning html string in the response's body instead of a json file. How do I deal with that?

[nDaniel86]

Could you please share your config? I cannot configure CORS with the latest Payload CMS version.

[nurabunamus]

Hi everyone,

I’m facing a CORS issue with my Payload CMS backend in production. My frontend (https://www.example.com) makes a POST request to the backend (https://api.example.com), but it’s blocked with this error:

Access to fetch at 'https://api.example.com/api/apply' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What I tried is to configure cors in buildConfig and it worked with GET methods only.

cors: {
  origins: ['http://localhost:3000', 'https://www.example.com'],
  headers: ['Content-Type', 'Authorization'],
},

Works in development (localhost), but fails in production for POST requests. Any idea why it happens exactly with POST? Any idea how to solve it?