码迷,mamicode.com
首页 > 其他好文 > 详细

Vue+Django 跨域问题配置

时间:2020-02-05 20:10:49      阅读:92      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!