React项目调用Weatherstack API出现https_access_restricted错误的原因及解决求助

嘿，我来帮你搞定这个问题！你遇到的https_access_restricted错误其实不是代码写错了，而是浏览器的安全策略在搞鬼，和Node.js环境的差异导致的：

问题到底出在哪？ #

• 在Node.js里，你直接发HTTP请求，服务器不会篡改请求协议，所以API能正常响应；
• 但在React的浏览器环境里，如果你的项目是用HTTPS运行的（比如本地开发默认的https://localhost:3000），浏览器会自动把你的HTTP请求升级成HTTPS请求——而你的Weatherstack订阅套餐不支持HTTPS加密访问，这不就触发错误了嘛！

具体解决办法 #

1. 本地开发：让React用HTTP启动

这是最快的解决方式，把React开发服务器改成HTTP协议运行，避免浏览器升级请求：

• 临时启动：直接在终端跑这个命令

  HTTPS=false npm start
  

• 永久生效：在项目根目录新建一个.env文件，写入这行内容：

  HTTPS=false
  

之后你的React应用会在http://localhost:3000运行，发出去的HTTP请求不会被篡改，就能正常拿到Weatherstack的数据了。

2. 生产环境部署（如果是HTTPS网站）

要是你的React应用已经部署到了HTTPS的线上环境，浏览器的混合内容规则会禁止页面加载HTTP资源，这时候只能二选一：

• 升级你的Weatherstack订阅套餐，解锁HTTPS访问权限；
• 换一个支持HTTPS访问的免费气象API（不想花钱的话）。

最后再确认下 #

你代码里的请求URLhttp://api.weatherstack.com/current是对的，千万别改成HTTPS！API密钥和查询参数也没问题——核心问题就是浏览器偷偷把HTTP请求转成了HTTPS，刚好你的套餐不支持而已。

内容的提问来源于stack exchange，提问作者Jero Gallego