0
点赞
收藏
分享

微信扫一扫

前端使用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,
  });
};

响应结果:

前端使用proxy代理解决跨域的问题_封装_04

举报

相关推荐

0 条评论