解决跨域报错

Luke Ewin2023-11-09 8:27

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 其它解决方案

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