1. 解决跨域报错
Mixed Content The page at was loaded over HTTPS but requested an insecure resource This request has been blocked the content must be served over HTTPS
上面这个报错信息,想必大家并不陌生。
首先提一下什么是跨域。
跨域是:协议,主机,端口,三者只要有一个是不同,那么就会构成跨域。只有当这三者都相同的时候才认为是同源的,浏览器为了保证安全性,只有同源的请求才能相互获取内容。
1.1 问题场景再现
最近在开发一款智能客服机器人(其实就是调用第三方API
接口),部署到Linux
中使用了SSL
证书,也就是访问对话页面使用的是https
协议,但是请求接口中返回的url
是http
协议,因为要拿到接口返回的图片,音频,视频的url
,然后放入对应的标签中,但是浏览器会阻止加载,因为跨域了。
2. 解决方案
2.1 最推荐的解决方案
用nginx
做反向代理,使得我们请求我们项目的相对路径,然后通过Nginx反向代理到接口返回的url中。
markdown
server {
listen 80;
server_name 192.168.17.129;
location /yunwen {
root html;
index index.html index.htm;
proxy_pass http://api.yunwen.com
}
}
上面/yunwen
表示我们请求这个url
时会反向代理到http://api.yunwen.com
。
2.2 最不推荐的解决方案
修改浏览器中安全设置,把改接口返回的协议和ip或域名加入到信任列表中。
可以使用下面的命令打开谷歌浏览器的设置。
markdown
chrome://flags/#unsafely-treat-insecure-origin-as-secure
2.3 其它解决方案
可以修改后端代码,让其经过后端接口转发。