reactjs - 当我在 GCP/Heroku/Netlify 上托管时，react.js 应用程序中没有获取数据

Question

我正在尝试从 OMDB 中按标题获取一些电影数据。它在我的机器上运行良好，但是当我将它托管在 GCP/Heroku/Netlify 等提供商上时，我的搜索不会返回任何内容。这是 GCP 托管站点的链接：https ://joypaultheshoppies1234.web.app ，这里是带有代码的仓库：https ://github.com/cosmicRover/the_shoppies您可以在 gif 中看到搜索应该是将一些项目返回为 JSON

Answer 1

它失败并显示错误消息：

Mixed Content: The page at 'https://joypaultheshoppies1234.web.app/' was loaded 
over HTTPS, but requested an insecure resource 'http://www.omdbapi.com/?s=T&apikey=[your_api_key]'. 
This request has been blocked; the content must be served over HTTPS.

您的浏览器阻止从https://joypaultheshoppies1234.web.app/获取，因为您正在从安全站点 ( https) 向非安全端点 ( http) 发出请求。它不会在您的本地计算机上失败，因为（我假设）您本地运行的站点没有受到保护。

解决方案： 将应用程序中的 URL（协议）字符串更改为http端点https。（https受该 OMDB 端点支持。）

例如：https://www.omdbapi.com/?s=Top+Gun&apikey=[your_api_key]

MDN 关于混合内容

混合内容
当用户访问通过 HTTPS 提供的页面时，他们与 Web 服务器的连接使用 TLS 加密，因此可以免受大多数嗅探器和中间人攻击。包含使用明文 HTTP 获取的内容的 HTTPS 页面称为混合内容页面。像这样的页面只是部分加密，未加密的内容可供嗅探器和中间人攻击者访问。这使页面不安全。