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

【问题标题】：Mixed Content Error on React project using SWAPI (Star Wars API)使用 SWAPI（星球大战 API）的 React 项目出现混合内容错误
【发布时间】：2021-03-10 16:09:21
【问题描述】：

我构建了一个 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。

请求标头

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

调用栈

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

【问题讨论】：

我可以毫无问题地查看网站。
@SomeoneSpecial 网站将加载，只是缺少内容。

标签： reactjs axios mixed-content

【解决方案1】：

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

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

【讨论】：

谢谢@buzatto！那成功了！也谢谢你的解释，很有道理。所以现在我知道要检查是否存在不是“https”的第 3 方 api，我需要通过添加这个不安全请求元标记来确保我允许这些请求！