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

Question

我构建了一个 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 和硬编码 URL 和https 。

请求标头

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

调用堆栈

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

Answer 1

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

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