使用 SWAPI 的 React 项目出现混合内容错误(星球大战 API)

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

我构建一个 React 项目只是为了尝试一些事情,我在使用 SWAPI (Star Wars API) 时遇到问题。

在我的 React 项目中尝试通过 axios 使用他们的 API 时,我一直收到 Mixed Content Error

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.

即使我用 https://swapi.dev/api/people/3/ 对 URL 进行硬编码,我仍然遇到混合内容错误。

非常感谢任何帮助。

您可以在此处实时查看错误: https://zlerp.github.io/react-StarWars/#/people/3

React 组件发起请求

我只是在使用 Axios 和 https 的硬编码 URL。

请求Headers

响应位置显示 http 这可能与问题有关吗?如果是这样,我该如何改变呢?

调用堆栈

调用堆栈显示它正在处理第一个图像中显示的 Person.js 文件,您可以在那里看到行号。

这与以下事实有关:api 在您的网站加载 https 时在 http 上提供服务,因此浏览器会阻止请求。

由于您无法控制第 3 方 api 的事实,您可以通过添加元标记 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

来解决问题