1、pip install django-cors-headers
2、INSTALLED_APPS添加
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders',
'home',
]
3、添加中间件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、开启跨源
CORS_ALLOW_CREDENTIALS=True
CORS_ORIGIN_ALLOW_ALL=True
CORS_ORIGIN_WHITELIST=(
'https://127.0.0.1',
)
CORS_ALLOW_METHODS=(
'GET',
'POST'
)
CORS_ALLOW_HEADERS=(
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with'
)
5、vue cli安装axios包
npm install -g axios
6、项目导入
import axios from 'axios'
7、进行axios请求
mounted(){
this.getData()
},
methods:{
getData(){
axios({
url:'http://127.0.0.1:8000/api/client',
type:'json',
method:'get',
}).then((res)=>{
this.client=res.data.data
console.log(this.client)
})
}
}