浏览器访问网址出现blocked：mixed-content问题

vue2项目 浏览器访问网址出现（blocked：mixed-content）问题

问题描述

最近有个别同事提出浏览器通过域名访问内部系统时，出现网络错误，无法登录内部系统，但其他同事仍然正常的，并无不妥。

通过对他们浏览器运行检查时发现，网络状态报blocked：mixed-content(Chrome下会显示已屏蔽)。再对访问路径仔细对比发现出现问题的同事，都使用了https进行访问，更改为http访问后恢复正常

原因

MDN官网对mixed-content的定义

当使用者以 HTTPS 浏览网站，他们与服务器之间的连接就會以 TLS 加密，以防受到监听或中间人攻击。
一個含有HTTP明文內容的 HTTPS 页面称为混合內容（mixed content）。这种页面只有部份加密，沒有加密的內容，容易遭到监听和中间人攻击。这会令网页不安全。

在这种情况下，浏览器会阻止加载非安全的HTTP资源，以确保用户数据的安全性和完整性。

简单来说，你要用https那么请你尽量涉及的所有资源请全部使用https

解决方案

1. 更改浏览器设置

以Chrome浏览器为例，在设置中隐私和安全 > 不安全的内容 > 允许显示不安全的内容 添加我们自己的域名。通过这样的设置，使用https可以进行正常的访问

2. 更新前端项目

a. html中添加如下内容，这将会把http请求转化为https请求（如果不想动太多代码，可以使用此方法）

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

b. 升级HTTP资源为HTTPS（推荐）

• 保证前端项目中涉及到网络请求(图片、样式、后端交互等等)的都使用HTTPS协议
• 域名配置HTTP重定向到HTTPS(譬如nginx)

参考文章

• vue3项目 前端blocked:mixed-content问题解决方案
• 解决浏览器报 Mixed Content
• 【WEB】当HTTPS资源引入HTTP导致报错blocked:mixed-content （混合加载/Mixed Content）如何解决
• 解决浏览器报 Mixed Content