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
DanRibbens
3 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
ssyberg3 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'
  ]
```

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

DanRibbens

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

ssyberg3 years ago
Oh! I don't think I saw that documented, but it's possible I missed it.
ssyberg3 years ago
ACK nm I see it now.
jmikrut
3 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!
ahmetskilinc2 years 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.
ssyberg3 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
jmikrut
3 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!
revnelsonlast year
@jmikrut How can we set custom headers (access-control-allow-headers)?
dkonsoftwarelast year
Hope it helps: #4384
thantheinthwin3 months ago
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?
1 reply
nDaniel863 months ago
Could you please share your config? I cannot configure CORS with the latest Payload CMS version.
nurabunamus3 months ago
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?
1 reply
mus1cian2 months ago
Were you able to solve this?