JavaScript调用fetch()请求HTTP接口被识别为HTTPS访问受限原因排查

触发该问题的常见原因 #

• 最普遍的场景是前端页面运行在HTTPS协议下：现代浏览器出于安全限制，会自动将HTTPS页面内发起的HTTP请求（混合不安全内容）升级为HTTPS请求，你代码中写的是HTTP地址，但实际浏览器发出去的请求协议已经被替换成HTTPS，因此API端识别到HTTPS请求后返回了套餐不支持的报错。
• 若前端页面本身就是HTTP协议运行的，则属于本地网络/配置层面的强制升级规则导致：
  • 站点配置了包含upgrade-insecure-requests指令的内容安全策略（CSP），强制所有HTTP请求转HTTPS
  • 本地安装了HTTPS自动升级类浏览器插件
  • 本地网络环境、代理、VPN、网关配置了HTTP请求自动重定向到HTTPS的规则，也就是你后续排查到的网络配置问题

验证方式 #

打开浏览器开发者工具的「网络」面板，找到该fetch请求的记录，查看实际发起的请求URL的协议头，就能直接确认是否被自动转换为了HTTPS。

解决方案 #

• 本地开发时直接用HTTP协议启动前端服务，不要用HTTPS，即可避免浏览器自动升级请求协议
• 若必须在HTTPS页面内调用该接口，可以复用原有PHP的curl逻辑作为后端代理：前端AJAX请求你自己的后端接口，后端再通过HTTP协议请求aviationstack的API返回结果，完全绕开浏览器端的协议限制。

内容的提问来源于stack exchange，提问作者Grégoire Denis