• 解决Django+Vue前后端分离的跨域问题及关闭csrf验证


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

      在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

  • 相关阅读:
    qt用mingw编译时报错 multiple definition of
    作用域详解
    webpack-dev-server
    前端致命错误汇总
    那些我不知道的基础知识
    常见英语词汇第一记
    CSS权重;慎用!important
    校验正确获取对象或者数组的属性方法(babel-plugin-idx/_.get)
    同源策略
    用CSS实现梯形图标
  • 原文地址:https://www.cnblogs.com/zhuchenglin/p/9732245.html
走看看 - 开发者的网上家园