CODEWITHSUNDEEP
reactjsherokuaxiosmaterial-ui
Supriya Bhart
Supriya Bhart

Reputation: 89

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

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)

Upvotes: 0

Views: 803

Answers (1)

Abinash Panda
Abinash Panda

Reputation: 464

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.

Upvotes: 0

Related Questions