vue3+vite项目proxy代理使用小白篇
vue3+vite使用代理proxy代理联调接口的小白篇
·
项目使用vue3+vite中使用proxy代理
接口地址是这些:http://123.111.1.222:8752/downhole/carHistoricalTrack/findAll
服务器地址:http://123.111.1.222
端口号:8752
根目录:/downhole
后台提供接口:carHistoricalTrack/findAll
1、在vite.config.js中配置服务及其端口
和resolve设置路径的同级如图:
代码如下:
server: {
port: 80,
host: true,
open: true,
proxy: {
"/downhole": {
target: 'http://123.111.1.222:8752/downhole',
changeOrigin: true,//是否允许跨域
rewrite: path => path.replace(/^\/downhole/, '')
},
}
},
2、api中的car.js这样写:
import request from "@/utils/request.js"
// 回传数据查询
export function findAllEcho(params) {
return request({
url: "/downhole/carHistoricalTrack/findAll",
method: "post",
data: params
})
}
3、utils/request.js这样写:
// 需要确定后台返回的是否0和1还是200或者500
//响应拦截器
service.interceptors.response.use(
(response) => {
const res = response.data
if (res.code == 0 || res.code == 200) {
loadingInstance?.close();
return res.data;
} else if (res.code == 1 || res.code == 500) {
ElMessage.error(res.msg);
return Promise.reject(new Error(res.msg))
}
},
(err) => {
console.log(123);
loadingInstance?.close();
ElMessage.error("请求失败");
return Promise.reject(err);
}
);
4、页面中这样用:
//引入接口
import { findAllEcho, exportCarHistory } from "@/api/car.js";
//获取数据的接口方法
let getFindAllEcho = () => {
findAllEcho({
// 参数
startDate: starTime.value,
endDate: endTime.value,
}).then((res) => {
// 返回值 res
tableDataTour.value = res.list;
});
};
getFindAllEcho(); // 调用获取数据的接口方法
更多推荐



所有评论(0)