前端解决跨域
1、vue.config.js中配置devServer
devServer: {
proxy: {
"/api": {
target: "http://xxx:端口", // 将请求代理到后端的地址
changeOrigin: true,
pathRewrite: {
"^/api": "", // 如果后端接口不包含 '/api' 前缀，可以将其替换为空字符串
},
},
},
},
2、request.js中，封装axios时，根路径不用再写一遍后端地址
// 创建axios实例
const service = axios.create({
baseURL: "/api",
/*
* 超时
* timeout: 90000
*/
});
3、正常封装api接口
import request from "@/utils/request";
// 获取文件图片集合
export function getSonglist(data) {
return request({
url: "/xxx",
method: "post",
data: data,
});
}
4、如果请求正常，已经是200，但页面还是报错，可能是后端返回的数据格式和request.js的响应拦截器中，我们定义的不一样
// 响应拦截器
service.interceptors.response.use(
(res) => {
LoadingRequestCount--; // 调用完一个接口就进行-1
if (LoadingRequestCount == 0) {
setTimeout(() => {
LoadingInstance && LoadingInstance.close();
}, 200);
}
return res.data.list//可能从别处复制的时候是res.data.data，一定跟着后台返回的数据格式走
},
(error) => {
return Promise.reject(error);
}
);
