有什么方法可以使用不安全的 API 连接（React）？答案

【问题标题】：Any way to still be able to use an insecure API connection (React)?有什么方法可以使用不安全的 API 连接（React）？
【发布时间】：2020-12-10 08:22:42
【问题描述】：

我花了一些时间来制作它，它在本地运行良好，但在服务器上由于以下错误而中断。我使用的 API 似乎位于不安全的“http:”地址上，因此浏览器不允许连接，因为我的网站位于“https”地址上。有什么办法可以通过某种代理/heroku 来解决这个问题？

Github

The broken app website

混合内容：页面位于 'https://agwebdesign.net/react/petadoption/' 通过 HTTPS 加载，但请求了不安全的脚本 'http://api.petfinder.com/pet.find?key=920cf4ddd938497ba32bef47b7f35080&format=json&output=full&location=Seattle%2C%20WA&animal=&breed=&callback=jsonp_jfg1sgfprug5jl1'。此请求已被阻止；内容必须通过 HTTPS 提供。

【问题讨论】：

标签： reactjs http heroku https

【解决方案1】：

这对我在 vercel 上托管的 react 16.12 有效，后端使用不安全的“HTTP：”地址

第 1 步。转到网站的信息部分（网址旁边左右角的“i”按钮）

第 2 步。向下滚动到“不安全内容”并从下拉列表中选择“允许”

第 3 步。刷新页面，一切顺利

【讨论】：

【解决方案2】：

您为什么要这样做？您应该在任何地方都使用 HTTPS。有了Let's Encrypt 之类的工具，再也没有理由不这样做了。

无论如何，该特定 URL 似乎也通过 HTTPS 提供。只需将协议从http:// 更改为https://，它就不会被阻止。

【讨论】：