如何解决请求被阻止问题？改造axios HTTP请求适配HTTPS

报错原因 #

这是浏览器的混合内容限制导致的：当你的网页通过HTTPS协议加载时，浏览器会拦截页面中发起的HTTP协议请求——因为HTTP传输的数据未加密，存在被窃听、篡改的安全风险，所以浏览器默认禁止这类跨协议的请求。

解决步骤 #

• 优先确认目标API是否支持HTTPS：绝大多数现代公共API都已支持HTTPS，直接将请求URL的http://替换为https://即可解决问题。
• 若目标API仅支持HTTP（极少情况）：需搭建自己的HTTPS代理服务器，让前端请求代理服务器（HTTPS），再由代理服务器转发请求到目标HTTP API。但此方案仅作为备选，优先推荐使用支持HTTPS的API。

修改后的代码示例 #

const getLocation = async () => {
   // 将URL的http替换为https
   const LOCATION_URL = 'https://ip-api.com/json/?fields=country,city,lat,lon,timezone';
   const response = await axios.get(LOCATION_URL);
   return response.data;
}

验证说明：ip-api服务完全支持HTTPS，修改后请求会正常发起，不会再被浏览器拦截。

内容的提问来源于stack exchange，提问作者Milad.eb96