Deploy create-react app on heroku with material ui and axios

0
votes

I am getting an error like:

Mixed Content: The page at 'https://reactapp.herokuapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.//'. This request has been blocked; the content must be served over HTTPS.

Failed to load resource: the server responded with a status of 404 (Not Found)

1
reactjsherokuaxiosmaterial-ui
are you using a relative or full url when creating the axios request? please post the code – Yoav
Welcome to SO. Please provide a Minimal, Complete, and Verifiable example. Show us the code for your latest attempt and where you got stuck. and explain why the result is not what you expected. Edit your question to include the code, please don't add it in a comment, as it will probably be unreadable. stackoverflow.com/help/mcve It is better to show what is actually happening, rather than describing what you expect to happen. – Dragonthoughts
also, try using reactapp.herokuapp.com to see if it's working via that URL – John Beynon

1 Answers

0
votes

Chrome browser blocks mixed content by default. As your React app is getting served using https and your api is getting served using http, it is blocking the api service.

One way to solve this problem is to

  • modify your backend server to serve using https (use https://letsencrypt.org/ to get free SSL certificate)
  • else use proxy to proxy api requests with create-react-app . This way your API backend would be also served with https solving mixed content issue.

For more details regarding deployment to heroku refer to https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0.