django+vue实现跨域(前端跨域和后端跨域)

django实现跨域

只需几步即可实现跨域
1.下载django-cors-headers

pip install django-cors-headers

2.在INSTALLED_APPS里添加“corsheaders”

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',
    'rest_framework.authtoken',
    'channels',
    'corsheaders',    # 配置跨域
]

3.在MIDDLEWARE_CLASSES添加 ‘corsheaders.middleware.CorsMiddleware’

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',

]

4…在sitting.py里添加

# 设置跨域
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True

django实现跨域完成

vue实现跨域

修改config文件下的index.js
添加一下配置

proxyTable: {
      '/api':{
        target: 'http://localhost:8000',
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }
      }
    },

---

前后端配置跨域后axios请求的格式

前端配置跨域后
this.axios({
        url: "/api/user/",
      }).then(res => {
      	
      });
 后端配置跨域后
 this.axios({
        url: "http://127.0.0.1:8000/user/",
      }).then(res => {
      	
      });