CORS error on deployed React app, but not on local development or production built app

JavaScript
#1

Hi everyone,

I am working on a React job search application, using the GitHub Jobs API, which has a same origin policy.

Here is a link to my github repo GitHub - camcgreen/jobstasy: Job search app. Built using Create React App, React Router, Firebase and GitHub Jobs API. Designed using Figma, with inspiration taken from Himalayas.

I am getting the CORS policy: No ‘Access-Control-Allow-Origin’ error when I deploy my app with Firebase but it is working fine when run locally.

I am prefixing my API calls with https://thingproxy.freeboard.io/fetch as a CORS anywhere type-approach for the sake of simplicity. My understanding was that this should work no matter what the origin of the request is (localhost or a live deployed site) but perhaps I have misunderstood.

I know this is commonly asked question but I can’t see what I’m doing wrong, so any help would be greatly appreciated!

Also apologies if I haven’t provided enough info, this is my first post here. :slightly_smiling_face:

Thanks,
Cam

#2

Hi @camcgreen !

Welcome to the forum!

I am moving this topic to the javascript section since you are asking about react.

You will also get more responses if you share your code.
If you could share a link to your github repo that would be great.

#3

Hi @jwilkins.oboe

Thank you for such a quick reply!

Here is the link to my GitHub repo: https://github.com/camcgreen/jobstasy

The particular block of code I am having trouble with is this:

jobs = await axios(
        `https://thingproxy.freeboard.io/fetch/https://jobs.github.com/positions.json?description=${this.state.description}&location=${this.state.location}`
      );

Found in src/components/Jobs.js line 161.

The jobs array populates when I run locally:

Screenshot 2021-02-14 at 12.40.44
Screenshot 2021-02-14 at 12.40.443840×1886 426 KB

but I get a CORS error when I run the live production app https://jobstasy.web.app/jobs:

#4

Awesome!

I have edited your post to also include the github link.

I am not as far long as you so I wouldn’t be able to assist you .
But there are plenty of people on the forum with the expertise that would be happy to help.

Also, keep in mind that sundays are sometimes slow on the forum.
So if it takes a while for someone to respond then that is normal.

Good luck!

#5

Great, thank you! :grinning:

#6

Hello there,

Others might have a nicer solution, but the only way I have ever avoided this error is by using cors in a backend API. That is, you will need to create a backend, and fetch the data from there, to pass to your frontend.

This way, you have more control over the headers in the request.

Hope this helps

#7

Hi @Sky020 ,

Thank you, that’s what I feared but probably needed to hear!

I’m very inexperienced with working with a backend, I thought I might be able to get around it with http-proxy-middleware .

I tried setting up a proxyServer.js with the following code:

const proxy = require("http-proxy-middleware");

module.exports = app => {
  app.use(
    "/jobs",
    proxy({
      target: "https://jobs.github.com",
      changeOrigin: true
    })
  );
};

Sadly it didn’t work but in my head this should mean that any requests sent to https://jobstasy.web.app would be forwarded to https://jobs.github.com. So in theory https://jobstasy.web.app/positions.json?description=react&location=london for example would be forwarded to https://jobs.github.com/positions.json?description=react&location=london and so would be same origin, but no luck unfortunately.

I will have a bit more of a look into setting up a back-end for this.