Allowing CORS options?

[nickmagee1]

Hi, I am beginning to setup my Payload API with a React front end. I am using GraphQL, and I have the query working in Postman, but when I try to call the GraphQL through Apollo Client in React, I get the error below:

Access to fetch at 'http://localhost:3000/api/graphql' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

From Googling, I think it is something to do with allowing the cors Options in the payload config.

Here is my payload config:

import { buildConfig } from 'payload/config';
import Categories from './collections/Categories';
import Examples from './collections/Examples';
import Media from './collections/Media';
import Products from './collections/Products';
import Users from './collections/Users';
import HomePageGlobals from './globals/HomePage';

export default buildConfig({
  serverURL: 'http://localhost:3000',
  cors: '*',
  admin: {
    user: Users.slug,
  },
  collections: [
    Users,
    Categories,
    Media,
    Products
    // Add Collections here
    // Examples
  ],
  globals: [
    HomePageGlobals
  ]
});

As you can see, I am allowing cors origins from anywhere and the resource I am accessing is public and working on Postman.

I am really stumped on this one. Any help would be appreciated.

[jmikrut]

Hey @theNickMagee — I'm willing to bet that this is not CORS related, but instead, CSRF-related.

Your console says that your request was rejected because It does not have HTTP ok status.

You should be able to check your server logs, and figure out where and why your backend is crashing. You're probably either receiving a 403 or a 500 error, and you could diagnose why.

But, that's why I think this is a CSRF issue. Payload has built-in CSRF protection, which works by restricting which domains are allowed to authenticate a user. Basically... if you make a request from https://some-other-website.com, Payload will ignore your JWT cookie. You'd need to whitelist https://some-other-website.com in your csrf array in order to recognize an incoming user from any domain that is not your serverURL or your main Payload domain.

Try that.

[nickmagee1]

Unfortunately, does not seem to be working. Thanks for the response. Here is my new payload.config.js file:

import { buildConfig } from 'payload/config';
import Categories from './collections/Categories';
import Examples from './collections/Examples';
import Media from './collections/Media';
import Products from './collections/Products';
import Users from './collections/Users';
import HomePageGlobals from './globals/HomePage';

export default buildConfig({
  serverURL: process.env.SERVER_URL,
  cors: '*',
  csrf: ["http://localhost:3001"],
  admin: {
    user: Users.slug,
  },
  collections: [
    Users,
    Categories,
    Media,
    Products
    // Add Collections here
    // Examples
  ],
  globals: [
    HomePageGlobals
  ]
});

Same error still. Also, by "server logs", do you mean the terminal I am running payload from? Because that seems to be giving no output when the request is made.

[jmikrut]

Yes, I mean the terminal you're running Payload from. Very strange that you can't see any errors there.

Hmm, what is the response returned from the request? Look in your browser inspector's network tab and click on the bad request to /api/graphql. What is the status code of the response? What is the response body?

[nickmagee1]

So I was able to solve this but I will give a description of the error.

When adding cors: '*' to payload.config.js the error is as below with status 405:

When removing that line the error is as below:

However, the code below solves the issue regardless of the config, and this app.use(cors(corsOptions)) is important to be put before other middleware.

var cors = require('cors');
var corsOptions = {
  origin: '*',
  credentials: true
}


require('dotenv').config();
const app = express();

app.use(cors(corsOptions));

Thanks for your help and hope this description helps. Maybe I should submit this as an issue but not sure.

[danielgriese]

Hey all, just joining in on this as I was stumbling across this too and it caused me several hours of headache and a lot of debugging ;)

Turns out, the cors config setting is fine so far and sets the correct headers.
The problem though is, that it is calling the next() middleware function in all cases, thus even OPTIONS requests for preflight cors checks will run through the express-chain and eventually hit the graphql middleware too. And this one will fail as it only allows for GET or POST methods. Thus you'll get a 405 Method not allowed error... but in chrome / network tab you cannot see that it is originating in the graphql layer, it only says 405 & cors failed due to http status not being ok.

I handled this now with a custom preMiddleware, but it could be solved in the original one by adding a line at the end of setting the headers.

if (req.method === "OPTIONS") { return res.status(204).end(); }

So essentially after settings the cors headers for our OPTIONS preflight call, we do return/end and do not further handle the request. works for me now 💪

@jmikrut I could submit a PR for it if you'd like

[lucianogreiner]

Question: Why not deferring Cors configuration to the given Express instance?

[jmikrut]

Good question - we just figured that it's so often needed, that we could implement it without having every project ever need to add the cors package or similar.

[lucianogreiner]

Here we use the same old app.use(cors()) and that's it. I wonder if having this inside Payload isn't just adding more responsibility than it should. Anyway, just a thought.