axios配置代理
axios配置代理
·
1.安装axios
npm i -S axios
2.新建src/utils/request.js项目核心请求方法的模块方法
import axios from 'axios'
// 创建一个自定义的axios方法(比原来axios多个基地址)
// axios函数请求的url地址前面会被拼接基地址,然后axios请求baseURL+url后台完整地址
const request = axios.create({
baseURL:"/api",
timeout:3000
})
// 导出自定义的axios方法,供外面调用传参发请求
export default request
3.新建src/api/index.js项目接口方法统一管理模块方法
import request from '@/utils/request'
export const loginAPI =(data)=>{
// 这里先用这个接口测试下,如果url以http开头会忽略baseURL,axios直接请求此地址
return request({
method:"POST",
url:"/login",
// Content首字母C要大写
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, //请求头要加这个},
data: qs.stringify(data)
}
})
}
4.在任意组件src/App.vue中,引入接口请求方法,并请求数据
import {loginAPI} from '@/api'
export default {
created(){
this.loginFn()
},
methods:{
async loginFn(){
const res = await loginAPI()
console.log(res)
}
}
}
这种分层架构思想,可以更好的统一管理项目中所有的接口,也并方便统一给axios方法添加拦截器和修改基地址
5.产生跨域,配置代理
// vue.config.js
module.exports = {
devServer:{
proxy:{
"/api":{
// 代理目标地址
target:"http://1.116.64.64:5004/api2",
// 允许跨域
changeOrigin:true,
// 重写路径
pathRewrite:{
"^/api":""
}
}
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)