Django和Vue分离开发的前期准备

在前后端分离开发下(全栈)，测试某个相关接口功能时免不了要启动各自的微服务，导致出现跨域问题。
本文用作解决这些问题的记录。

Django 3.1
django-cors-headers 3.4.0
vue 2.9.6

Django配置

pip安装好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', #添加这个
    'blog', #项目app
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',  #添加这个
    'django.middleware.common.CommonMiddleware',
    #'django.middleware.csrf.CsrfViewMiddleware',  #注释这个接收axios参数,不然就403
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    #'django.contrib.auth.middleware.SessionAuthenticationMiddleware', #注释这个不然微服务报错
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    
]

注释django.contrib.auth.middleware.SessionAuthenticationMiddleware’, #注释这个不然微服务报错
安装django-cors-headers后，启动微服务报错就跟着报错去改配置

CORS_ALLOW_CREDENTIALS = True #cookie
CORS_ORIGIN_ALLOW_ALL = True
#CORS_ORIGIN_WHITELIST = ('*')#这句话可以不加 白名单报错就不加！！！！！！！！！！！！！！
CORS_ALLOW_METHODS = (
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    # 'XMLHttpRequest',
    # 'X_FILENAME',
    # 'accept-encoding',
    # 'authorization',
    # 'content-type',
    # 'dnt',
    # 'origin',
    # 'user-agent',
    # 'x-csrftoken',
    # 'x-requested-with',
    # 'Pragma',
   'withcredentials', #跨域session
)

跨域配置

# SESSION_ENGINE = 'django.contrib.sessions.backends.db'  #基于数据库 存在session表
SESSION_ENGINE = 'django.contrib.sessions.backends.cache' #基于缓存
SESSION_COOKIE_NAME = "sessionid"
SESSION_COOKIE_PATH = "/"
SESSION_COOKIE_DOMAIN = None
SESSION_COOKIE_SECURE = False
SESSION_COOKIE_HTTPONLY = True
SESSION_COOKIE_AGE = 43200
SESSION_EXPIRE_AT_BROWSER_CLOSE = True
SESSION_SAVE_EVERY_REQUEST = False

session配置

view.py中错误页面配置

def testBootstrap(request):
    return render(request, 'test.html')

def page_not_found(request,exception): #增加exception
    return render(request, '404.html')
    
def page_error(request):
    return render(request, '500.html')
    
def permission_denied(request,exception): #增加exception
    return render(request, '403.html')
    
def bad_request(request,exception): #增加exception
    return render(request, '400.html')

一般启动微服务报错会有提示

写好的接口在urls.py公开路由地址

vue配置

在main.js添加
axios.defaults.headers[‘withCredentials’] =true;

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import 'bootstrap/dist/css/bootstrap.min.css'

Vue.config.productionTip = false

axios.defaults.headers['withCredentials'] =true; // 跨域资源访问
Vue.prototype.$axios = axios;
Vue.use(ElementUI);


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这是在django配置添加’withcredentials’的原因

Django与React 前后端分离开发时遇到CORS跨域问题导致的Session无法传递的问题
django request.session.session_key获取的值为None