Go语言视频零基础入门到精通

admin

  前后端分离难免要接触到跨域问题，跨域的相关知识请参：跨域问题，解决之道
  在Django和vue前后端分离的时候也会遇到跨域的问题，因为刚刚接触Django还不太了解，今天花了好长的时间，查阅了好多资料现在解决了这个问题，记录一下。

Django配置
   
   首先在Django框架里面要安装django-cors-headers包,在项目根目录下执行

1. pip install django-cors-headers

复制代码

   配置settings.py
     
     引入刚刚安装的包

1. [code]INSTALLED_APPS = [  
2. "django.contrib.admin",  
3. "django.contrib.auth",  
4. "django.contrib.contenttypes",  
5. "django.contrib.sessions",  
6. "django.contrib.messages",
7. "django.contrib.staticfiles",                    
8. "corsheaders"                                                    #刚才安装的django-cors-headers包所引入的app
9. ]

复制代码

[/code]
     配置参数
在配置文件中加入以下内容，可根据自己的情况作调整

1. [code]    DEBUG = True                                                           #开启debug模式，注意上线运营时要关闭debug
2.     ALLOWED_HOSTS = ["*"]                                                    # 允许所有ip访问
3.     CORS_ALLOW_CREDENTIALS = True
4.     CORS_ORIGIN_ALLOW_ALL = True                    
5.     CORS_ALLOW_HEADERS = ("*")                                            #允许所有的请求头

复制代码

[/code]
     配置中间件

1. [code]    MIDDLEWARE = [
2.         "django.middleware.security.SecurityMiddleware",
3.         "django.contrib.sessions.middleware.SessionMiddleware",
4.         "corsheaders.middleware.CorsMiddleware",                              #注意顺序，必须放在这儿
5.         "django.middleware.common.CommonMiddleware",
6.         "django.middleware.csrf.CsrfViewMiddleware",
7.         "django.contrib.auth.middleware.AuthenticationMiddleware",
8.         "django.contrib.messages.middleware.MessageMiddleware",
9.         "django.middleware.clickjacking.XFrameOptionsMiddleware",
10.     ]

复制代码

[/code]
     
   
Vue配置
一般情况下Vue中往后端请求的话都是通过axios
   
   安装axios

1. [code]npm install axios

复制代码

[/code]
   Vue的main.js配置axios

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

复制代码

[/code]
   

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

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

1. [code]from django.views.decorators.csrf import csrf_exempt

复制代码

[/code]
然后在每个不需要csrf验证的方法上方加上

1. [code]@csrf_exempt

复制代码

[/code] 这样就可以了（或者是在settings文件中将csrf的中间件给注释掉也行）。

本文前半部分参考：django+vue打造前后端分离的项目时，跨域问题的解决！
如需转载，请注明出处：https://www.cnblogs.com/zhuchenglin/p/9732245.HTML