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

Question

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

Mixed Content Error在我的 React 项目中尝试通过 axios 使用他们的 API 时，我不断收到 。

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.

即使我用 硬编码 URL https://swapi.dev/api/people/3/，我仍然收到混合内容错误。

非常感谢任何和所有帮助。

你可以在这里看到错误：https : //zlerp.github.io/react-StarWars/#/people/3

React 组件发出请求

我只是使用 Axios 和带有https.

请求头

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

调用栈

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

Answer 1

这与在您的站点加载 https 时在 http 上提供 api 的事实有关，因此浏览器会阻止请求。

由于您无法控制第 3 方 api 的事实，因此您可以解决添加元标记的问题 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">