HTTPS站点请求非HTTPS接口触发Mixed Content错误该如何解决？

错误原因 #

你遇到的是浏览器的混合内容安全拦截策略触发的报错，触发逻辑如下：

• 你的线上站点是通过HTTPS协议加载的，属于加密安全传输场景
• 站点内发起的API请求使用了HTTP明文协议，和当前页面的传输协议不一致
• 浏览器为了避免HTTPS的加密安全能力被明文请求破坏，防止请求内容被篡改、窃听，会直接拦截这类跨协议的请求
• 本地开发环境你一般是用HTTP协议打开页面，协议和API请求一致，所以不会触发拦截

修复方案 #

• 优先方案：将你调用的API服务升级支持HTTPS访问，同时修改前端代码里所有API请求的URL前缀，把http://替换为https://
• 兼容方案：如果你的API同时支持HTTP和HTTPS，可以把请求URL写成协议相对格式，比如把http://example.com/api改成//example.com/api，浏览器会自动匹配当前页面的协议发起请求，避免出现跨协议问题
• 临时调试方案（仅开发自测用，禁止生产环境使用）：可以手动修改当前浏览器的安全设置，允许当前站点加载混合内容，该方案仅能解决你自己设备的访问问题，普通用户的浏览器默认仍会拦截请求

注意：生产环境绝对不要引导用户修改浏览器设置来解决该问题，会严重降低站点安全性，也会大幅提升用户使用门槛。

内容的提问来源于stack exchange，提问作者Harshil Sharma