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

  在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. 利用CORS解决前后端分离的跨域资源问题

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

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

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

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

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

  9. Django+Vue前后端分离项目的部署

    部署静态文件: 静态文件有两种方式 1:通过django路由访问 2:通过nginx直接访问 方式1: 需要在根目录的URL文件中增加 url(r'^$', TemplateView.as_view( ...

随机推荐

  1. Gson解析数组多类型元素

    本文的出现是为了解决以下需求:使用Gson对json数组进行解析,但是数组里面元素的类型是多种的.数据如下: {"list":[{ "type":0, &quo ...

  2. hdu 5311 Hidden String(find,substr)

    Problem Description Today is the 1st anniversary of BestCoder. Soda, the contest manager, gets a str ...

  3. 爱加密亮相第十八届软博会,移动App安全引关注

    2014年5月29日至31日,2014年第十八届中国国际软件博览会在北京展览馆举行,此次软博会的主题为"软件引领信息消费,助力经济转型升级",充分展示软件业在促进信息消费.提升社会 ...

  4. 180行ruby代码搞定游戏2048

    最今在玩2048这款小游戏,游戏逻辑简单,很适合我这样的对于游戏新入行的人来实现逻辑.于是选择了最拿手的ruby语言来实现这款小游戏的主要逻辑.还是挺简单的,加起来4小时左右搞定. 上代码: requ ...

  5. 201521123029《Java程序设计》第十二周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  6. ReportView动态加载带参数的RDCL文件及子报表

    本文来自Torres.Wu发表在博客园的博客,转载请标明出处. 同上一篇差不多,这次咱们加载带有子报表的RDCl文件.首先还是创建一个form程序,在form2窗体中添加一个ReporView控件,l ...

  7. EasyPR源码剖析(7):车牌判断之SVM

    前面的文章中我们主要介绍了车牌定位的相关技术,但是定位出来的相关区域可能并非是真实的车牌区域,EasyPR通过SVM支持向量机,一种机器学习算法来判定截取的图块是否是真的“车牌”,本节主要对相关的技术 ...

  8. 我们在学习JDBC的时候会过度到J2EE。

    我们在学习JDBC的时候会过度到J2EE.   在Swing的组件中,基本上都是在AWT组件的名称前面加“J”. 一般情况下,除了Choise等组件: import javax.swing.*;好要加 ...

  9. PrintNumber.java

    /****************************************************************************** * Compilation: javac ...

  10. VirtualBox中挂载物理磁盘

    注1. 详细内容请参考VirtualBox帮助文件. 注2. 需对dos命令有一定了解. 注3. 以下命令均需以管理员身份执行,VirtualBox也需以管理员身份运行. 主要应用host上的vbox ...