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

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

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?

ssyberg2 years ago
Oh! I don't think I saw that documented, but it's possible I missed it.
ssyberg2 years ago
ACK nm I see it now.
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!
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.
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
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!
revnelson12 months ago
@jmikrut How can we set custom headers (access-control-allow-headers)?
dkonsoftware12 months ago
Hope it helps: #4384