解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道
在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了好多资料现在解决了这个问题,记录一下。
Django配置
- 首先在Django框架里面要安装django-cors-headers包,在项目根目录下执行
pip install django-cors-headers
- 配置settings.py
引入刚刚安装的包
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders' #刚才安装的django-cors-headers包所引入的app
]
配置参数
在配置文件中加入以下内容,可根据自己的情况作调整DEBUG = True #开启debug模式,注意上线运营时要关闭debug
ALLOWED_HOSTS = ['*'] # 允许所有ip访问
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_HEADERS = ('*') #允许所有的请求头配置中间件
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware', #注意顺序,必须放在这儿
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
- 首先在Django框架里面要安装django-cors-headers包,在项目根目录下执行
Vue配置
一般情况下Vue中往后端请求的话都是通过axios安装axios
npm install axios
Vue的main.js配置axios
//配置请求头,非常重要,有了这个才可以正常使用POST等请求后台数据
axios.defaults.headers.post['Content-Type'] = 'application/x-www-fromurlencodeed'
到此为止,关于Django+Vue前后端分离的跨域问题就解决了,但是后来发现,还是无法请求到数据,因为Django有csrf验证,我们可以通过某种方式将其给关掉,下面就简单来了解一下:
在接收前端请求的文件中(我这边是view.py)中引入
from django.views.decorators.csrf import csrf_exempt
然后在每个不需要csrf验证的方法上方加上
@csrf_exempt
这样就可以了(或者是在settings文件中将csrf的中间件给注释掉也行)。
本文前半部分参考:django+vue打造前后端分离的项目时,跨域问题的解决!
如需转载,请注明出处:https://www.cnblogs.com/zhuchenglin/p/9732245.html
解决Django+Vue前后端分离的跨域问题及关闭csrf验证的更多相关文章
- 【笔记】总结Springboot和Vue前后端分离的跨域问题
跨域一直是个很玄学的问题,SSM的时候又得前后端一起配置,sb的时候又不用. 前端 axios普通get请求 submitForm() { var v=this; this.$axios({ meth ...
- React:快速上手(8)——前后端分离的跨域访问与会话保持
React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...
- php前后端分离项目跨域问题解决办法
由于之前一直没有做过前后端分离项目,导致走了不少弯路,而且还采用了一种及其不优雅的方法 (在第一次请求的时候把服务器返回的session id保存起来,后续请求的时候把该session id作为参数传 ...
- 【js】【跨域问题】前后端分离的跨域问题
最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西 php采用的是yii框架,登录的机制或者调用接口都需要前端传递cooki ...
- 前后端分离之 跨域和JWT
书接上回:https://www.cnblogs.com/yangyuanhu/p/12081525.html 前后端分离案例 现在把自己当成是前端,要开发一个前后分离的简单页面,用于展示学生信息列表 ...
- spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据
1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...
- 利用CORS解决前后端分离的跨域资源问题
CORS 即CrossOrigin Resources Sharing-跨域资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求.它是一个妥协,有更大的灵活性,但比起简单地允许所有这些 ...
- SpringBoot 实现前后端分离的跨域访问(CORS)
序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...
- 前后端分离开发,跨域访问的apche设置
1,如何让Apache支持跨域访问呢? 步骤: 修改httpd.conf,windows中对应的目录是:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 把 ...
随机推荐
- 迭代和JDB
迭代和JDB 使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功能. 源代码 public class Combination { public st ...
- Ubuntu版本linux系统安装git
可以使用apt-get方式安装,也可以下载源代码安装,我们这里使用apt-git安装.但由于直接使用 sudo apt-get install git 安装的版本较老,因此我们参考[2]中给出的PPA ...
- 使用extjs的页面弹出窗口宽度不能自适应如何解决?
1.资源趋势详情下钻页面宽度不能自适应,无法点击关闭按钮 var detailWindow = Ext.create("App.view.com.huawei.drp.qoe.vivid.C ...
- 使用element-ui遇到的各种小问题
一.Dialog对话框 1.在使用嵌套Dialog的时候,会出现遮罩层在内容的上方这种错乱情况 解决办法:http://element-cn.eleme.io/#/zh-CN/component/di ...
- matlab 写文件
fid = fopen('data.txt','w');for oo=1:1:i if mod(oo,10) == 0 fprintf(fid,'%f,%f,\n',sI1(oo),sQ1(oo)); ...
- 算法工程师<深度学习基础>
<深度学习基础> 卷积神经网络,循环神经网络,LSTM与GRU,梯度消失与梯度爆炸,激活函数,防止过拟合的方法,dropout,batch normalization,各类经典的网络结构, ...
- Chrome浏览器自动填充<input>标签的密码
问题:登录页面登录时,Chrome浏览器保存了用户名和密码,在其他页面管理其他的账户和密码时,密码框先是显示正确的密码,然后一闪而过被覆盖. 原因:问了技术主管才得知,Chrome浏览器中的,保存用户 ...
- 2018-2019-2 网络对抗技术 20165328 Exp1 PC平台逆向破解
实验目的: 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getSh ...
- python-常见数据类型及其方法
常见数据类型及其方法 1.None: 表示空(无任何功能,专门用于提供空值) 2.整形(int) 3.布尔类型(bool) 只有两个结果:True/False: 0/''/[]/()/{}/set() ...
- 基于flask+gunicorn+nginx来部署web App
基于flask+gunicorn&&nginx来部署web App WSGI协议 Web框架致力于如何生成HTML代码,而Web服务器用于处理和响应HTTP请求.Web框架和Web服务 ...