Vue跨域axios配置,django跨域配置

---

vue

配置前安装 axios

安装命令: npm install --save axios

// main.js文件

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

Vue.prototype.$axios = axios

---

Django

# settings.py
# 配置跨域信息

INSTALLED_APPS = [
    'corsheaders',  # 注册跨域信息
]


MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 在CSFRF中间件位置配置跨域中间件
    # 'django.middleware.csrf.CsrfViewMiddleware',  # 关闭CSRF中间件
]


# 允许所有源访问 
CORS_ORIGIN_ALLOW_ALL = True  
 
# 允许携带cookie
CORS_ALLOW_CREDENTIALS = True  

# 允许的请求头
CORS_ALLOW_HEADERS = ["X-Requested-With", "token", "Content-Type"]  

# 允许的请求方法
CORS_ALLOW_METHODS = ['POST', 'GET', 'PUT', 'DELETE']  

# 跨域白名单是个元组,当只有一个元素时,后面需要加一个逗号(,)
CORS_ORIGIN_WHITELIST = ("https://127.0.0.1:8080",)