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

如果我们项目请求的地址为 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’。

posted @ 2018-09-25 18:20  青春给了义务教育  阅读(2838)  评论(0编辑  收藏  举报