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

北战南征 提交于 2020-01-23 04:23:56

文章目录

前文

  接手同事项目很久,由于没认真看项目配置,在接到从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的配置的时候,一定得确认额外从其他配置文件导入的配置~

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!