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

Question

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

在我的 React 项目中尝试通过 axios 使用他们的 API 时，我不断收到混合内容错误。

混合内容:位于“https://zlerp.github.io/react-StarWars/#/people/2”的页面是通过 HTTPS 加载的，但请求了不安全的 XMLHttpRequest 端点“http://swapi” .dev/api/people/3/'。此请求已被阻止；内容必须通过 HTTPS 提供。

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

非常感谢任何帮助。

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

React 组件发起请求

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

请求 header

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

调用栈

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

Answer 1

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

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