前端使用proxy代理解决跨域的问题

 实现方法：

本地向proxy代理服务器发送请求，proxy接收本地请求，转换为目标地址相同IP和端口向目标地址发送请求。

配置：

（注意：因为我是本地启动的后端服务器，所以使用地址为localhost '一些为/api' ）

vue.config.js

devServer: {
    open: true,
    proxy: {
      "/localhost": {        // 监听拦截以/localhost开头的请求接口，并替换成target
        target: "http://192.168.2.150:8031",    // 需要代理的目标url,本地就ipconfig查看域名地址
        // target: "http://xx.xx.xxx.xxx:xxxx",  // 后端服务器部署的域名地址,即后端接口
        changOrigin: true,   // 开启代理，允许跨域
        // secure: false,    // 如果使用https，会有安全校验，添加设置secure为false
        pathRewrite: {       // 重写匹配的字段，如果不需要在请求路径上，重写为""
          "^/localhost": "",
        },
      },
    },
  },

request.js：（二次封装的axios请求）

axios封装完整代码：axios 二次封装调用接口的配置

// axios.create 方法创建一个axios的实例
const request = axios.create({
  // 接口的基准路径,监听拦截以/localhost开头的请求接口，并替换成target
  // 判断是生产环境还是开发环境
  process.env.NODE_ENV === "development"
      ? "localhost"                  // ? "http:/localhost:8039"
      : "http://xx.xx.xxx.xxx:xxxx", // 后端服务器部署的域名地址
});

api.js：（接口文件）

// 存储接口封装，用户相关的请求模块
import request from "@/utils/request.js";

// export const login = (user) => {
//   return request({
//     url: '', // 接口地址
//     method: 'POST', 'GET',  // 请求方式：
//     data: user              // 如果参数通过请求体来发(post)，用data是请求体参数
//   })                        // 如果参数通过请求行来发(get)，用params是路径参数
// }  

// -用户登录
export const login = (data) => {
  return request({
    method: "POST",
    url: "/admin/waterMeter/login",  // 后端提供的接口地址
    data,
  });
};

响应结果：