Django+Vue前后端分离从http升到https经验(解决Mixed Content和OPTIONS ERR_CONNECTION_CLOSED)

前文

  接手同事项目很久，由于没认真看项目配置，在接到从http升到https的需求后，自己搞了很久，在2天后找到原因却哭笑不得，就是一个非常简单的原因，在这里记录下，当碰到这个问题的时候一定要从ALLOWED_HOSTS入手，而不是绕一大圈排查前端、https、跨域等等问题，当然如果你确认了非ALLOWED_HOSTS可以从这些入手。
  一切前提当然首先得先配对https，也就是说你要有证书，证书如果是自研项目就去申请；如果是公司项目就让运维同事分配到对应的主机上，然后指定ssl到指定目录即可。

解决

  原项目是Django+Vue的http方式，在确认了nginx配置无误(即ssl证书正常配置以及80端口强制转443端口，且能telnet通的情况下)，浏览器报了两个错误：Mixed Content和OPTIONS ERR_CONNECTION_CLOSED。
  解决这两个错误就是相对应的改2行代码即可，分别对应的前端和后端，针对前端：

原先是直接在一台机子上访问ip和端口，所以prod.env.js是：
BASE_API: '"http://127.0.0.1:8000"',

  因为这个原因在转为https后浏览器即报Mixed Content，即浏览器请求前端是https，但前端请求后端接口却是http，所以先要让前后端统一为https，那就需要配个域名来解决，可以在对应的主机/etc/hosts表里新增一个域名，比如test123.sand，则修改如下：

BASE_API: '"https://test123.sand"'

  这样即解决Mixed Content的问题，此时会报错：

OPTIONS ERR_CONNECTION_CLOSED

  如果后台项目是Django，一定要确认ALLOWED_HOSTS，我就是忘了仔细看同事的配置文件，以为仅配了db和redis等生产数据库，然后当我看到setting文件里没有ALLOWED_HOSTS，就加上了：ALLOWED_HOSTS=[’*’,]，发现仍无效，接着去排查跨域的cors，比如白名单列表等，排查了ssl的报错，修改nginx配置等等，折腾了很久，等第二天回头一看原来在配置文件里配置了ALLOWED_HOSTS，所以我私自在setting里加上的被覆盖了。

总结

  在排查setting的配置的时候，一定得确认额外从其他配置文件导入的配置~