CORS "Missing Allow Origin" despite configuration

Get Help and Help Others
1

Hello!

I’ve got a Redwood app set up and running locally. While the primary consumer of the Redwood api side is the Redwood web side, I also want some of the API available to other websites entirely… For example, I have another project running locally at “localhost:5174/”, and I want that website to make requests for data from the Redwood API running at “localhost:8911”.

I’ve configured the cors property in Redwood’s createGraphQLHandler like so:

cors: {
    origin: [process.env.REDWOOD_WEB_URL, process.env.OTHER_URL],
    credentials: true,
  },

…where REDWOOD_WEB_URL is the URL of the web side of the Redwood project, and OTHER_URL is “localhost:5174” as described above.

But even with that configuration, when I visit “localhost:5174”, I get a message saying CORS is “Missing Allow Origin”.

What can I do to get this working?

Thanks so much in advance!

P.S. I’m using Auth0 for authentication, but for the “external” website making the request to the API, authentication is not necessary (that is, my intent is that certain API requests are allowed by the “public”, if I’m using the right terminology…)

2

There’s a number of things that could be going wrong here (CORS gets pretty complicated and hard to debug) but a few easy things to check would be whether your env vars include http:// as the origin needs to be a fully qualified domain, and just having localhost:port won’t be considered valid.

Another thing to check would be to go into the network tab of your browser when you make the request and click into the request sent to http://localhost:8911 and check the ‘headers’ tab to see what the request and response headers are - you’re looking for the Access-Control-Allow-Origin header, or the Referrer Policy headers. Check the graphql yoga docs for more info on setting up your server, and this auth0 tutorial for more info about cors generally.

That being said, if the intent is to have public/open access to certain areas of your api, an easier and safer approach might be to use redwood’s serverless functions instead of trying to give public access to your graphql instance. This approach makes it easier (you don’t have to mess with CORS - redwood’s functions are open by default) as well as making your graphql sercurity policies easier to handle in the future, as it can be an easy enough slip up and forget an @requireAuth decorator in a spot that you should have one, and then you have a potential data breach.

3

Hey there @tbay06, I appreciate the response!

As a matter of fact, I forgot to point out that I had indeed used a Redwood Function for the “public” endpoint, which stillwasn’t working… but after more digging, I realized I had to literally set the origin header myself in the response coming from the function I created, like so:

return {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*', // <-- this guy
    },
    body: JSON.stringify(data),
  }

…so it was ultimately my own oversight (as usual :smiley: ).

Thanks again!

2 Likes
4

…and just for clarity’s sake should anyone else stumble on this, I returned my CORS config to its original state, like so:

cors: {
    origin: process.env.REDWOOD_WEB_URL,
    credentials: true,
  },
2 Likes