I've built a wee program that works fine when I run it locally. I've deployed the backend to Heroku, and I can access that either by going straight to the URL (

This error essentially means that your public-facing application (running live on Netlify) is trying to make an HTTP request from your JavaScript front-end to your Heroku backend deployed on a different domain.

CORS dictates which requests from a frontend application are ALLOWED to make a request to your backend API.

What you need to do to fix this is to modify your Heroku application and have it return the appropriate Access-Control-Allow-Origin header. This article on MDN explains the header and how you can use it.

Here's a simple example of the header you could set on your Heroku backend to allow this to work:

Access-Control-Allow-Origin: *

Please be sure to read the MDN documentation, however, as this example will allow any front-end application to make requests to your Heroku backend when in reality, you'll likely want to restrict it to just the front-end domains you build.

CodePudding user response：

God I feel so daft, but at least I've worked it out.

I looked at the console on a different browser (Edge), and it said it was blocking it because it was mixed origin, and I realised I had just missed out the s in the https on my API call, so it wasn't actually a cors issue (I don't think?), but just a typo on my part!

So I changed: const API = axios.create({baseURL: 'http://gymbud-tracker.herokuapp.com' }); To this: const API = axios.create({baseURL: 'https://gymbud-tracker.herokuapp.com' });

And now it is working perfectly ☺️

Thanks for your help! Even if it wasn't the issue here, I've definitely learned a lot more about cors on the way, so that's good