浏览器接口出现Mixed-content报错及解决方案

本文主要是介绍浏览器接口出现Mixed-content报错及解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近在部署项目时，遇到了好几次部署到线上后访问接口出现 mixed-content 报错，但是在本地部署是没有这个问题的，所以将这个问题记录下来

一、错误出现原因

“blocked:mixed-content” 是一个安全警告，表示当前页面加载的资源存在混合内容（Mixed Content）。

出现这个问题的原因是因为在https网站中发起的http请求被禁止。也就是在https的网站中引入了 http 的图片、css、javascript 等其他资源或文件，浏览器便会提示 “Mixed Content” 错误，这是因为http 的资源容易被恶意攻击者利用，可能会导致安全问题，浏览器认为网页不是完全安全的。

二、解决方案

解决Mixed Content错误的方法通常有以下几种：

1. 升级HTTP资源为HTTPS

将网页中加载的所有资源链接都改为HTTPS链接，这样可以确保所有内容都通过安全的HTTPS协议加载。

2. 使用相对路径或协议相对路径

使用相对路径或协议相对路径加载资源，而不是使用绝对路径。例如，使用 // 开头的链接，浏览器会自动根据当前页面的协议（HTTP或HTTPS）来加载资源。

相对路径 ：相对路径是相对于当前页面所在的路径来引用资源的路径。相对路径不包含协议和主机名信息，只包含资源相对于当前页面的路径。例如：

images/picture.jpg：相对于当前页面的路径是 images/，表示在 images/ 目录下的 picture.jpg 图片。
../styles/style.css：表示返回到当前页面的父目录，然后进入 styles/ 目录下的 style.css 样式表。

协议相对路径：协议相对路径以 // 开头，它表示加载资源时根据当前页面的协议（HTTP 或 HTTPS）来选择相应的协议。这种路径格式允许资源在不同协议的页面之间共享，同时保持协议的一致性。例如：

//example.com/images/picture.jpg：表示根据当前页面的协议（HTTP 或 HTTPS）来加载 example.com 主机下的 images/ 目录下的 picture.jpg 图片。