VUE项目devServer.proxy匹配请求中的地址工作流程-Toy模板网

这篇具有很好参考价值的文章主要介绍了VUE项目devServer.proxy匹配请求中的地址工作流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

如何理解正向代理：代理服务器代替客户端向服务器发起请求。隐藏客户端。
发起请求：代理服务器从客户端发出请求，向目标服务器发起请求。
响应数据：目标服务器响应请求，代理服务器接收请求，并转发给客户端。

日常使用的翻墙就是基于这个原理。

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的后面，向后端服务器发起跨域请求。
举个栗子：文章来源地址https://www.toymoban.com/news/detail-565328.html

浏览器发起请求：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

到了这里，关于VUE项目devServer.proxy匹配请求中的地址工作流程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！