【vue】前后端不在同一网络下，前端解决跨域

前端解决跨域

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);
  }
);