vue2项目 浏览器访问网址出现(blocked:mixed-content)问题
问题描述
最近有个别同事提出浏览器通过域名
访问内部系统时,出现网络错误,无法登录内部系统,但其他同事仍然正常的,并无不妥。
通过对他们浏览器运行检查
时发现,网络状态报blocked:mixed-content
(Chrome下会显示已屏蔽
)。再对访问路径仔细对比发现出现问题的同事,都使用了https
进行访问,更改为http
访问后恢复正常
原因
当使用者以
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
)