页面访问时候 Mixed Content 错误的解决方案

页面访问时候 Mixed Content 错误的解决方案

之前给客户做的一个项目，我们提供的是纯前端的三维数据可视化界面，但是数据还是从客户那边获取过来的。

客户给我们提供了一个数据接口，我们通过接口获取到数据以后，再经过处理，然后展示到我们的界面上。

之前从开发，到测试，到交付，这种模式一直用的没问题。

后来某一天，客户突然找过来，问为什么他们将项目打包以后，部署到线上去，就发现出问题了，页面场景里面的东西出不来了。

我当时内心一惊，怎么好不容易交付的项目，都快到结尾款的阶段了，怎么又出问题了。

其实对于这个我从头跟到尾的项目，每个细节我几乎都知道，所以场景上没东西，我第一反应是，问题肯定出现在初始化场景的时候，没有拿到符合规范的数据。

之所以说是“符合规范”的数据，而不是直接断定说没有拿到数据，这是出于一个程序员的直觉吧。

毕竟在没有开始 debug 之前，过早做判断，说不定马上迎来的就是“啪啪”打脸了。

客户主动提议说，给线上的网址发给我，让我看看是啥问题。

本来第一反应是拒绝的，因为线上的是打包后的代码，都是经过压缩的代码，调试起来也困难。

但是既然主动权在客户那边，肯定就没有自己测试来的自由了。

虽然内心是拒绝的，但是也只得在浏览器中，点开客户发过来的链接，回车，进入熟悉的界面，开始找问题所在了。

果不其然，场景中的内容没加载出来，展示的是默认的场景。

于是打开控制台，重新刷新页面，控制台果然飘红了。

报错的提示，翻译成中文的话，意思大概就是，混用了 http 和 https 导致不安全，导致请求被阻止了，巴拉巴拉。

然后有一个很突出的关键字 Mixed Content。

顺着这个关键字，可以在 mdn 上找到相关的说明的文章：https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content

最好将两者统一成 https 协议，那么这个问题可能就会迎刃而解了。

而事实证明，这个方法确实有效果。

客户之前提供的数据接口的地址是采用的 http 协议的，但是他们将项目部署到线上的时候，是放在 nginx 服务器里面的，开启了 https 访问协议。

如果他们访问页面的网址和服务器的地址域名不同的话，还是不会产生冲突的，但是刚好他们又是放在同一个服务器上提供服务的，所以就造成了这种 Mixed Content 错误。

这就是所谓的“无巧不成书”吧，平时写代码的时候，很多 bug 也就是在这种极度巧合的情况下才出现的。