前端解决跨域

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--; // 调用完一个接口就进行-1if (LoadingRequestCount == 0) {setTimeout(() => {LoadingInstance && LoadingInstance.close();}, 200);}return res.data.list//可能从别处复制的时候是res.data.data，一定跟着后台返回的数据格式走},(error) => {return Promise.reject(error);}
);