2

I building a React project just to try some things out, I am having issues using SWAPI (Star Wars API).

I keep receiving a Mixed Content Error when trying to use their API via axios in my React project.

Mixed Content: The page at 'https://zlerp.github.io/react-StarWars/#/people/2' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://swapi.dev/api/people/3/'. This request has been blocked; the content must be served over HTTPS.

Even when I hardcode the URL with https://swapi.dev/api/people/3/, I am still getting the Mixed Content Error.

Any and all help is greatly appreciated.

You can see the error live here: https://zlerp.github.io/react-StarWars/#/people/3

React Component making Request

I am just using Axios and the hardcoded URL with https. enter image description here

Request Headers

The response Location is showing http could that be something to do with the issue? if so how can I change this? enter image description here

Call Stack

The Call Stack shows that it is going through the Person.js file shown in the first image and you can see the line numbers there. enter image description here

Zlerp
  • 467
  • 7
  • 16

1 Answers1

11

that's related to the fact that the api is served at http while your site is loaded https, so the browser blocks the request.

since you have no control over the fact that the 3rd party api, you can solve the issue adding the meta tag <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

buzatto
  • 9,704
  • 5
  • 24
  • 33
  • 1
    Thanks @buzatto ! That did the trick! Thanks for the explanation as well, makes a lot of sense. So now I know to check that if there is a 3rd party api that is not ` https`, I need to make sure I allow these requests by adding this insecure-request meta tag! – Zlerp Nov 27 '20 at 23:30
  • 3
    This meta tag added a CORS error – Nithin Sai Jun 18 '22 at 13:10