vue proxyTable代理 解决开发环境的跨域问题

Posted 2021-01-08 huoerheaven

如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 

可以设置代理为：

dev:{　

    assetsSubDirectory: ‘static‘,// 静态资源文件夹

    assetsPublicPath: ‘/‘,// 发布路径

  proxyTable: { // 代理配置表，在这里可以配置特定的请求代理到对应的API接口 // 例如将‘localhost:8080/api/xxx‘代理到‘www.example.com/api/xxx‘ // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
       ‘/a‘: {
              target: htttp://xxxx.com/a‘,

             // secure: false,  // 如果是https接口，需要配置这个参数

 　          changeOrigin: true,// 如果接口跨域，需要进行这个参数配置

             pathRewrite: {
               ‘^/a‘: ‘‘

             }
        } 
   }

}

例如：接口地址原本是 /save/index，但是为了匹配代理地址，在前面加一个 /api,  因此接口地址需要写成这样的即可生效 /api/save/index。

注意： ‘/api‘ 为匹配项，target 为被请求的地址，因为在 请求的 url 中加了前缀 ‘/api‘，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 ‘/api‘ 转为 ‘/‘。如果本身的接口地址就有 ‘/api‘ 这种通用前缀，就可以把 pathRewrite 删掉。

项目中常见的：

项目中请求的地址应该为 axios.get(‘/a/b/c‘),代理解析时会在a前面加上" htttp://xxxx.com"变成了" htttp://xxxx.com/a/b/c",
当项目打包上线时，代码里的请求地址不需要改动，因为当线上代码运行时，遇到 axios.get(‘/a/b/c‘) ，a前面有个‘/’代表根目录的意思。
所以‘/a/b/c’会被解析为 postname+port+‘a/b/c‘,所以请求地址为 ‘htttp://xxxx.com/a/b/c’。