问题发生背景:本来好好的官网,没有做任何改变时突然发现F12调用后端接口报错:blocked:mixed-content
解决办法:1、直接点击网站设置
这样临时解决,但是也不能让使用者去设置,毕竟不是每个使用者都是用的chrome或者熟悉浏览器设置,此种解决办法pass。
2、blocked:mixed-content报错原因大白话就是浏览器升级了,原来不安全的访问方式被禁止了,不能通过https里面通过http去调用后端的服务。
想了个最简单的方法就是直接配置nginx反向代理,比如我访问页面:https://www.xxxyyyzzz.com/website/product/list
我需要代理到http://137.23.12.96:8087/website/product/list的后端服务,因为我后端配置的yml种的context-path是/website,也就是说我所有的后端接口
里面肯定都包含/website
所以,那我就在nginx上配置:
# 反向代理配置仅适用于 /website 路径
location /website {
proxy_pass http://137.23.12.96:8087/website;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
当然前端配置从http://外网IP:端口
改为https://域名
综上操作,问题解决,想了一下可能是因为浏览器升级导致突然报错。所以如果想尽量少的发生线上问题,就少动所有代码,所有服务器以及配置,包括浏览器。对于代码和环境来说不变就是稳定。