Mixed Content Error on React project using SWAPI (Star Wars API)

Question

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.

Request Headers

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

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.

Answer 1

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">