Vue-cli 3.0 中如何配置axios跨域多个代理?
Vue-cli 3.0 中如何配置axios跨域多个代理?1、vue.config.jsdevServer: {open: true,port: 8081,proxy: {//匹配/dev-api开头的请求[process.env.VUE_APP_BASE_API]: {//目标服务器,代理访问到https://localhost:8080target: process.env.VU
·
Vue-cli 3.0 中如何配置axios跨域多个代理?
1、vue.config.js
devServer: {
open: true,
port: 8081,
proxy: {
//匹配/dev-api开头的请求
[process.env.VUE_APP_BASE_API]: {
//目标服务器,代理访问到https://localhost:8080
target: process.env.VUE_APP_SERVICE_URL,
// 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,
// 并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
changOrigin: true, //开启代理
pathRewrite: {
// 会将 /dev-api 替换为 '',也就是 /dev-api 会移除,
// 如 /dev-api/db.json 代理到 https://localhost:8080/db.json
// '^/dev-api':"",
["^" + process.env.VUE_APP_BASE_API]: ""
}
},
//匹配/list-api开头的请求
[process.env.VUE_APP_LIST_API]: {
//目标服务器,代理访问到https://localhost:8080
target: process.env.VUE_APP_LIST_URL,
// 开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,
// 并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
changOrigin: true, //开启代理
pathRewrite: {
// 会将 /list-api 替换为 '',也就是 /list-api 会移除,
// 如 /list-api/db.json 代理到 https://localhost:8080/db.json
// '^/list-api':"",
["^" + process.env.VUE_APP_LIST_API]: ""
}
},
}
},
2、.env
# 使用 VUE_APP_ 开头的变量会被 webpack 自动加载
# 定义请求的基础URL, 方便跨域请求时使用
VUE_APP_BASE_API = '/dev-api'
VUE_APP_LIST_API = '/list-api'
# 接口服务地址, 以你自已的为主
# 可更改为你自已配置的 Easy-Mock 接口服务地址
# http://120.53.31.103:84/api
VUE_APP_SERVICE_URL = 'http://120.53.31.103:84/api/'
VUE_APP_LIST_URL = 'http://120.27.63.9:8080/'
3、api
export function test1(data) {
return request({
url: 'dev-api/test1',
method: 'post',
data,
});
}
export function test2(data) {
return request({
url: 'list-api/test2',
method: 'post',
data,
});
}
更多推荐
已为社区贡献2条内容
所有评论(0)