VUE项目devServer.proxy匹配请求中的地址工作流程

Bruce18012023-07-22 12:28

在Vue项目的开发过程中，为了本地调试方便，通常会在vue.config.js 中配置 devServer。在devServer中配置proxy属性，可以将指向本地的请求（例如： http://localhost:8080/api/action）代理到后端的开发服务器上（例如： http://localhost:8089/personal-management/action）。

js 复制代码

devServer: {
/** 接口代理 */
      proxy: {
        '/api': {
          target: 'http://localhost:8089/personal-management',
          changeOrigin: true,/** 是否允许跨域 */
          ws: false,//是否启用websockets，用不到可设为false
          pathRewrite: {//对路径匹配到的字符串重写
            "^/api": "",
            // 替换前缀'/api'，即：请求到 http://localhost:8080/api/xxx 现在会被代理到请求 http://localhost:8089/personal-management/xxx, 例如 /api/user 现在会被代理到请求  http://localhost:8089/personal-management/user
          },
        }
      }
    }

当浏览器发起一个请求后，前端拿配置项中的地址去匹配请求中的地址，如果请求的地址中包含配置中的地址，则匹配成功，匹配成功后，会将匹配到的地址及其后面的地址拼到target的后面，向后端服务器发起跨域请求。

举个栗子：

浏览器发起请求：http://localhost:8080/api/user
和配置项匹配成功后，将/api/user拼接到target的后面。
现在，对 /api/user 的请求会将请求代理到 http://localhost:8089/personal-management/api/user
如果后端接口中不包含/api，不希望传递/api，则需要重写请求路径将浏览器发起的请求的请求URL中的 "/api" 替换为 ""
此时对 http://localhost:8080/api/user 的请求，前端会将请求代理到 http://localhost:8089/personal-management/user