1、配置跨域
配置文件中:vue.config.js(vue2为config下面的配置文件)
切记在修改配置文件后需要重新启动项目,在热部署是无法修改配置的
module.exports={
devServer:{
proxy:{
'/api':{
target: 'http://47.95.228.79:2001',
changeOrigin:true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
2、编写请求
注意下面内容中的api 就会被替换为上面的地址
request.js
import axios from 'axios'
export function request (config){
// axios.defaults.baseURL = '/api'
// axios.defaults.headers.post['Content-Type'] = 'application/json';
const instance = axios.create({
baseURL: '/api',
timeout: 5000,
})
instance.interceptors.request.use(config => {
console.log("请求成功")
return config
},err=>{
console.log("请求失败:"+err)
})
instance.interceptors.response.use(config=>{
console.log('响应成功')
return config.data.data
},err=>{
console.log("错误:"+err)
})
//发送真正的网络请求
return instance(config)
}
3、通过request发送请求
例如
注:上面的request位于src下面的network文件夹中(自己创建)
import {request} from '@/network/request'
export function test(){
return request({
url: 'test',
method: 'get'
})
}