前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道

  在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了好多资料现在解决了这个问题,记录一下。

  1. Django配置

    1. 首先在Django框架里面要安装django-cors-headers包,在项目根目录下执行
      pip install django-cors-headers
    2. 配置settings.py
      1. 引入刚刚安装的包

        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
        ]
      2. 配置参数

        在配置文件中加入以下内容,可根据自己的情况作调整

        	DEBUG = True                                                           #开启debug模式,注意上线运营时要关闭debug
        ALLOWED_HOSTS = ['*'] # 允许所有ip访问
        CORS_ALLOW_CREDENTIALS = True
        CORS_ORIGIN_ALLOW_ALL = True
        CORS_ALLOW_HEADERS = ('*') #允许所有的请求头
      3. 配置中间件

        	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',
        ]
  2. Vue配置

    一般情况下Vue中往后端请求的话都是通过axios

    1. 安装axios

      npm install axios
    2. Vue的main.js配置axios

      //配置请求头,非常重要,有了这个才可以正常使用POST等请求后台数据
      axios.defaults.headers.post['Content-Type'] = 'application/x-www-fromurlencodeed'

到此为止,关于Django+Vue前后端分离的跨域问题就解决了,但是后来发现,还是无法请求到数据,因为Django有csrf验证,我们可以通过某种方式将其给关掉,下面就简单来了解一下:

  1. 在接收前端请求的文件中(我这边是view.py)中引入

    from django.views.decorators.csrf import csrf_exempt
  2. 然后在每个不需要csrf验证的方法上方加上

    @csrf_exempt

这样就可以了(或者是在settings文件中将csrf的中间件给注释掉也行)。

本文前半部分参考:django+vue打造前后端分离的项目时,跨域问题的解决!

如需转载,请注明出处:https://www.cnblogs.com/zhuchenglin/p/9732245.html

解决Django+Vue前后端分离的跨域问题及关闭csrf验证的更多相关文章

  1. 【笔记】总结Springboot和Vue前后端分离的跨域问题

    跨域一直是个很玄学的问题,SSM的时候又得前后端一起配置,sb的时候又不用. 前端 axios普通get请求 submitForm() { var v=this; this.$axios({ meth ...

  2. React:快速上手(8)——前后端分离的跨域访问与会话保持

    React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...

  3. php前后端分离项目跨域问题解决办法

    由于之前一直没有做过前后端分离项目,导致走了不少弯路,而且还采用了一种及其不优雅的方法 (在第一次请求的时候把服务器返回的session id保存起来,后续请求的时候把该session id作为参数传 ...

  4. 【js】【跨域问题】前后端分离的跨域问题

    最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西 php采用的是yii框架,登录的机制或者调用接口都需要前端传递cooki ...

  5. 前后端分离之 跨域和JWT

    书接上回:https://www.cnblogs.com/yangyuanhu/p/12081525.html 前后端分离案例 现在把自己当成是前端,要开发一个前后分离的简单页面,用于展示学生信息列表 ...

  6. spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据

    1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...

  7. 利用CORS解决前后端分离的跨域资源问题

    CORS 即CrossOrigin Resources Sharing-跨域资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求.它是一个妥协,有更大的灵活性,但比起简单地允许所有这些 ...

  8. SpringBoot 实现前后端分离的跨域访问(CORS)

    序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...

  9. 前后端分离开发,跨域访问的apche设置

    1,如何让Apache支持跨域访问呢? 步骤: 修改httpd.conf,windows中对应的目录是:C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf 把 ...

随机推荐

  1. 迭代和JDB

    迭代和JDB 使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功能. 源代码 public class Combination { public st ...

  2. Ubuntu版本linux系统安装git

    可以使用apt-get方式安装,也可以下载源代码安装,我们这里使用apt-git安装.但由于直接使用 sudo apt-get install git 安装的版本较老,因此我们参考[2]中给出的PPA ...

  3. 使用extjs的页面弹出窗口宽度不能自适应如何解决?

    1.资源趋势详情下钻页面宽度不能自适应,无法点击关闭按钮 var detailWindow = Ext.create("App.view.com.huawei.drp.qoe.vivid.C ...

  4. 使用element-ui遇到的各种小问题

    一.Dialog对话框 1.在使用嵌套Dialog的时候,会出现遮罩层在内容的上方这种错乱情况 解决办法:http://element-cn.eleme.io/#/zh-CN/component/di ...

  5. 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)); ...

  6. 算法工程师<深度学习基础>

    <深度学习基础> 卷积神经网络,循环神经网络,LSTM与GRU,梯度消失与梯度爆炸,激活函数,防止过拟合的方法,dropout,batch normalization,各类经典的网络结构, ...

  7. Chrome浏览器自动填充<input>标签的密码

    问题:登录页面登录时,Chrome浏览器保存了用户名和密码,在其他页面管理其他的账户和密码时,密码框先是显示正确的密码,然后一闪而过被覆盖. 原因:问了技术主管才得知,Chrome浏览器中的,保存用户 ...

  8. 2018-2019-2 网络对抗技术 20165328 Exp1 PC平台逆向破解

    实验目的: 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getSh ...

  9. python-常见数据类型及其方法

    常见数据类型及其方法 1.None: 表示空(无任何功能,专门用于提供空值) 2.整形(int) 3.布尔类型(bool) 只有两个结果:True/False: 0/''/[]/()/{}/set() ...

  10. 基于flask+gunicorn+nginx来部署web App

    基于flask+gunicorn&&nginx来部署web App WSGI协议 Web框架致力于如何生成HTML代码,而Web服务器用于处理和响应HTTP请求.Web框架和Web服务 ...