美文网首页
vue.config.js中proxy配置

vue.config.js中proxy配置

作者: coderfl | 来源:发表于2022-06-20 16:45 被阅读0次

    Vue配置文件中的proxy配置

    1. 这里以axios发请求为例
    axios.get("/abc/def");
    axios.get("/abc/ghi");
    axios.post("/abc/jkm");
    //axios发送的请求是本地的服务器地址拼接上发送的请求,如 http://localhost:8080/abc/def
    
    1. 如果发送的请求都以 /abc 开头,那么我们就可以在proxy中进行服务器代理配置。
    devServer: {
      proxy: {
        "/abc": {
          target: "http://XX.XX.XX.XX:8081",
          changeOrigin: true,
          ws: true,
          secure: false,
        },
      },
    },
    // "/abc":{} : 引号中代表监测的是以 /abc 开头的接口
    // target : 代表监测到以 /abc 开头的接口后,把axios请求中前面的本地服务器地址改为后端接口地址,实际发送给后端的请求就是下方后一个请求:http://localhost:8080/abc/def -->http://XX.XX.XX.XX:8081/abc/def
    // changeOrigin : 是否跨域
    // ws : 如果要代理 websockets,配置这个参数
    // secure : 如果是https接口,需要配置这个参数(如果是http接口,也可以不写这个参数)
    // pathRewrite :替换请求中匹配的内容。在3的方法2中详细解释用法,上方未使用此参数
    
    1. 代理多个接口
    axios.get("/zzz/one");  // http://localhost:8080/zzz/one
    axios.get("/xxx/two");  // http://localhost:8080/xxx/two
    
    • 方法1:监测多个接口,可以在proxy中写多个配置:(适用于target不同的代理,相同也可以用这个方法,就是会麻烦一点,对于相同的target方法2会比较方便)
    devServer: {
      proxy: {
        "/zzz": {
          target: "http://XX.XX.XX.XX:8082",
          changeOrigin: true,
          ws: true,
        },
        "/xxx": {
          target: "http://XX.XX.XX.XX:8083",
          changeOrigin: true,
          ws: true,
        },
      },
    },
    // 那么实际发送给后端的请求就是:
    // http://XX.XX.XX.XX:8082/zzz/one
    // http://XX.XX.XX.XX:8083/xxx/two
    
    • 方法2:使用axios进行前设置(适用于target相同的代理)
    // 一般在全局设置里引入,例如main.js,方便第二行的配置被每一个axios请求识别
    import axios from "axios";
    // 只要发送axios请求,就在请求前加入/api的开头,例如 /zzz/one -> /api/zzz/one
    axios.defaults.baseURL = "/api";
    

    进行了上方的配置后,在本地发送的请求会变为

    http://localhost:8080/api/zzz/one
    http://localhost:8080/api/xxx/two
    

    而后可以设置只监听 "/api" 的代理,不过要设置pathRewrite参数:

    devServer: {
      proxy: {
        "/api": {
          target: "http://XX.XX.XX.XX:8084",
          changeOrigin: true,
          ws: true,
          pathRewrite: { "^/api": "" },
        },
      },
    },
    // pathRewrite :检查代理的请求中是否有 /api ,有的话把 /api 替换为冒号后面的内容,案例为替换成空字符串,也就是删去 /api 。(^是正则表达式的内容,意思是限定开头)
    

    本地请求 http://localhost:8080/api/zzz/one =>
    代理后请求 http://XX.XX.XX.XX:8084/api/zzz/one =>
    设置pathRewrite后的请求 http://XX.XX.XX.XX:8084/zzz/one
    所以代理完成后真正发送给后端的请求就是http://XX.XX.XX.XX:8084/zzz/one 啦。
    1.统一给请求添加/api方便监测代理 2.统一删去/api发送正确的请求

    注意:小伙伴们可能会看到浏览器中右键检查打开的控制台中,网络->标头->常规,中的请求网址显示的还是 http://XX.XX.XX.XX:8084/api/zzz/one 。这是因为浏览器的同源策略,经过代理设置的请求发送给后端已经变成 http://XX.XX.XX.XX:8084/zzz/one 没有/api 的形式了,不用被浏览器显示的请求网址干扰。如果实在不想看到浏览器的请求网址中有api,可以采用方法1。

    相关文章

      网友评论

          本文标题:vue.config.js中proxy配置

          本文链接:https://www.haomeiwen.com/subject/raslvrtx.html