"Not allowed to request resource" in Safari and "Blocked loading mixed active content" in Firefox. Perfect functionality in Chrome

Was going to delete this because it is such a silly problem but maybe it will help someone in the future:

I simply replaced all of my 'http://localhost:PORT' endpoints in development with '/graphql'. I assumed that localhost meant local the machine running the code. But an app running on Heroku does not point to localhost. The express server is served on the url (https://powerful-shore-83650.herokuapp.com/) in our case...

At any rate I am so glad I came to a solution. I have a full stack app deployed and connected to a db. Hopefully this post can save someone lots of time.

This may also happen during local development when running the front end using HTTPS, but the back end using HTTP.

This is because CORS treats two URLs as having the same origin "only when the scheme, host, and port all match". Matching scheme means matching protocols e.g. both http, or both https.

One solution for local development is to proxy the back end using a tool such as ngrok.

Suppose the front end uses an environment variable which indicates the back end's URL:

BACK_END_API_URL=http://localhost:3005. Then do the following.

• Install ngrok
• Identify what port the back end is running on e.g. 3005
• Run ngrok http 3005 at the command line, which will establish both http and https endpoints. Both will ultimately proxy the requests to the same back end endpoint: http://localhost:3005
• After running ngrok it will display the http and https endpoints you can use. Put the one that matches the front end protocol you're using (e.g. https) into your front end environment variable that indicates the back end's URL e.g.

BACK_END_API_URL=https://1234asdf5678ghjk.ngrok.io