Vue+Django 跨域问题配置

标签：origin   token   table   file   odi   wmi   pps   gen   war   

跨域请求问题：

1.Django后端解决办法：

# 后端下载模块：
pip install django-cors-headers


# settings配置：
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'app.utils.middlewares.CorsMiddleWare',
]

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app.apps.AppConfig',
    'corsheaders',
    'rest_framework',
]

# 跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
# CORS_ORIGIN_WHITELIST = (
#     'https://127.0.0.1:8080'
# )
CORS_ALLOW_METHODS = (
    'DELETE',
    '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',
)

2.前端配置：

config/index.js
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:8000/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

• main.js

import Axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = Axios
Vue.prototype.HOME = '/api'
// 配置默认URL
Axios.defaults.baseURL = '/api'
Axios.headers = {'Content-Type': 'application/json'}
Axios.timeout = 1000 * 10

• 使用

this.$axios.get(this.HOME + '/v1/login/', {
            params: {
              user: value
            }
          })
            .then(function (response) {
              console.log(response)
            })
            .catch(function (error) {
              console.log(error)
            })

Vue+Django 跨域问题配置

标签：origin   token   table   file   odi   wmi   pps   gen   war   

原文地址：https://www.cnblogs.com/xujunkai/p/12266205.html