django+vue无法设置跨域cookies
后端开发环境:Django 3.2.9
前端开发环境:vue3 + ts
浏览器版本:chrome(96.0.4664.45)
问题:
最近开发一个新项目,前端使用axios进行http类的封装,前后端分离进行api调试,进行登录后,后续的api调用发现无法识别到cookie。
尝试情况:
1、axios设置withCredentials,无效
2、分析api请求和响应信息,发现响应标头有一段警告信息
3、联想到既然是响应标头出现报警信息,那么可以考虑从django入手。在官网上输入"SAMESITE",果然找到了相关的说明,通过在settings.py设置 SESSION_COOKIE_SAMESITE='None' 和 SESSION_COOKIE_SECURE=True 后成功解决问题。
Django+Vue静态资源问题
使用 django 2.2。
一般来说,使用指令 npm run build 得到打包的 dist 包,交给 nginx 做路由转换(配置 location /static )即可,需要的只是在django配置可访问的 index.html 路径。
但是由于需要(?), 我想在本地进行测试,也就是说在没有 nginx, 开启 debug = True 的环境下调试。于是打开 python manage.py runserver , 结果进入首页没有出现欢迎页面,打开 dev tools ,显示是这个样子的:
解决方法:将 vue 工程文件夹在 INSTALLED_APPS 里面注册下就行。
如果不注册 app, 那么即使写入文件夹, django 也不会扫描(根目录除外):
如上所示我在 STATICFILES_DIR 中已经写入了 blogfro (也就是 vue 文件目录) 打包完成后的 static 文件夹,但是进入首页仍然白屏。
白屏表示模板 TEMPLATES 的路径正常,但是静态文件仍然加载不出来。这就需要注册 app 。注册后就能够扫描到静态文件。
注册后就成功显示了首页:
在没有加载 app时,发现把 css 与 js 文件放在一个已经注册 app(backend)的静态文件夹中,能够正常显示。这验证了静态文件夹的扫描需要注册 app。
以我的项目为例:
在 debug 模式下,只需要 STATIC_URL 与 STATICFILES_DIR 即可。
根据 django 文档 说法, STATIC_URL 是路径的映射。服务器会将匹配到它的路径视为静态文件请求,然后进入 STATICFILES_DIR 指定目录下查找,并总是尝试返回匹配到的第一个结果。
在生产模式下(关闭 debug ),对静态文件的引用会失效。换句话说,出于性能考虑,我们不使用django服务器进行静态资源请求。我们常使用其他反代服务器进行发送。
出于这个考虑,django 使用了 collectstatic 指令,能将所有 STATICFILES_DIR 下的文件打包到 STATIC_ROOT 下。之后只要配置反代服务器应用这个静态文件夹就行了。
之后就能直接对 blogfro 进行开发了,开发完成后使用 npm run build , 然后直接开启 django 服务器就能进行测试。最后打包上线的时候将dist下的内容复制到到 STATIC_ROOT 下,然后 python manage.py collectstatic (主要是收集 admin )的资源。
其实问题不是完全解决,但这是因为 vue + django 造成的。
django 使用自己的静态路径索引,必然有可能与vue发生冲突,为了处理必须进行调试。
使用 django 与 vue, 意味着希望进行前后端分离,所以开发过程本身就是隔离的。双方的交集应该是最后部署的时候(vue 打包, django 开启生产模式, 反代服务器开启(如 nginx))。这时候静态文件夹归反代服务器管理,不会出现这样的问题。
由于我只有一个人(太惨了),所以产生了同时调试 vue 与 django 的需求,这才导致了上面问题的产生。
django+vue前后端分离项目部署
后端用的drf,使用的是uwsgi+nginx
进入服务器项目文件目录下,我的django项目放在了“/usr/myProjects/”目录下了。在manage.py同级目录下创建uwsgi.ini文件,配置如下:
测试效果命令:
如果访问:xxx.xxx.xxx.xx:8000 成功, 则uwsgi.ini配置成功
我的nginx.conf所在位置是“/etc/nginx/nginx.conf”
配置文件如下:
1、第一行
主要就是给nginx加权限,vue部署后使用history路由时会去掉地址后面的‘#’号,打包部署后不加权限会有bug。
2、如配置所示,有两个Server,分别部署了前端服务,和后端服务,值得注意的是两个Server用的是同一个服务器,监听的端口不同。
3、vue部署需要注意的是反向代理地址:
以及后面的端口问题
4、后端的Server需要注意location中的uwsgi_pass 后面的端口号要和uwsgi.ini中配的相同,否则监听不到
5、后端跨域问题。如果遇到跨域需要自己网上找配置,我的没遇到,可能是因为我在django的settings中配置了跨域。
6、django-suit后台管理样式崩了,需要改,但是api可以正常访问,这个有空再说
7、我开始后台监听的是8008端口,vue前端监听的是80端口,这样前端显示好看。然而问题出现了,虽然后台api可以正常访问,vue的本地开发环境也能正常运行且文字、图片资源均显示正常,但是前端vue打包线上部署后,文字信息显示正常,图片信息缺失8008端口,导致显示不出来。为图方便我选择了前端监听8008端口,后端监听80,部署后显示正常。原因不太清楚///////有空再说吧。
8、不要问我为啥都前后端分离了还部署到一个服务器上?穷,而且只是测试,没必要
9、此文仅适合入门
关于django后台admin(suit)缺失的修改(参考:django中文网: )
在环境中进入项目目录,需要收集css样式,在终端输入命令:
接下来你就回发现static文件中包含了css文件,此时再打开网站,样式显示正常
uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件,里面只有一行内容是 uWSGI 的主进程的进程号。
关于uwsgi,进入同届目录下
教训
获取不到环境,那就指定环境
另外:记得重启uwsgi,重启Nginx,实在不行就先把监听的端口kill掉再重启
暴力删端口:fuser -k 80/tcp
netstat -aptn命令行,查看所有开启的端口号
netstat -ntlp | grep 80 查看具体的端口是否使用
ps -ef | grep uwsgi 查看是否有uwsgi端口存在
vue和python冲突吗
部分冲突,毕竟都是语言类,有部分的相似,但是肯定有不同
python写爬虫的脚本,也可以开发网站项目,最长处是数据分析的能力 比如说我要开发网站,要用到的知识点会有,python,js,css,网络的知识,服务器的知识等等
vue是用js+css编写好的写许多常用方法啊,样式的一些集成,便于调用,快速开发的框架
你说的tornado,flask,django都是python中几个比较主流的网站开发的框架,用于全栈开发.python在其中则是作为后端的开发语言 之前前端就是html,css和js,你说的vue是前端开的一种框架,是基于js的前端框架. 至于你说的交互的意思,vue+python本质上就是js+css等等+python的,也就只是经过集成的js+css等等+python的开发.
说有冲突不太对,说完全没有冲突也不对