vue和django配置跨域

vue

在main.js页面配置
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘…/router’
import ElelemtUI from ‘element-ui’
Vue.use(ElelemtUI)
import ‘element-ui/lib/theme-chalk/index.css’
Vue.config.productionTip = false

// 发送网络请求, 配置axios
import axios from ‘axios’
axios.defaults.baseURL = ‘http://127.0.0.1:8000’
// 请求携带cookie
axios.defaults.withCredentials = true
// 异步请求 不阻塞 —请求头
axios.defaults.headers[‘X-Requested-With’] = [‘XMLHttpRequest’]
// 获取本地token 没有则为空
axios.defaults.headers[‘token’] = localStorage.getItem(‘token’)||‘’
// 内容类型
axios.defaults.headers.post[‘Content-Type’] = ‘application/json’

new Vue({
router,
render: h => h(App),
}).$mount(‘#app’)

django

#允许所有源访问
CORS_ORIGIN_ALLOW_ALL = True
#跨域白名单
CORS_ORIGIN_WHITELIST = (‘http://127.0.0.1:8080’,)
#允许带着cookie
CORS_ALLOW_CREDENTIALS = True
#允许请求头
CORS_ALLOW_HEADERS = (‘x-requested-with’, ‘token’, ‘content-type’)
#允许请求方法 注意: 所有请求方法必须大写, 否则会报错
CORS_ALLOW_METHODS = (‘GET’, ‘POST’, ‘PUT’, ‘DELETE’)