解决跨域报错

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中。

server {
 listen       80;
 server_name  192.168.17.129;

 location /yunwen {
  root   html;
  index  index.html index.htm;
  proxy_pass  http://api.yunwen.com
 }
}
1
2
3
4
5
6
7
8
9
10

上面/yunwen表示我们请求这个url时会反向代理到http://api.yunwen.com。

2.2 最不推荐的解决方案

修改浏览器中安全设置，把改接口返回的协议和ip或域名加入到信任列表中。

可以使用下面的命令打开谷歌浏览器的设置。

chrome://flags/#unsafely-treat-insecure-origin-as-secure
1

2.3 其它解决方案

可以修改后端代码，让其经过后端接口转发。