首页 > 其他 > 详细

vue反向代理(解决跨域)

时间:2019-10-14 22:11:09      阅读:88      评论:0      收藏:0      [点我收藏+]

1,vue中有提供反向代理的接口,就是config/index.js中的proxyTable,我的脚手架版本是2.9.6,proxyTable配置初始为空,如下图。

技术分享图片

2,将proxyTable配置如下:

 proxyTable: {
      ‘/api‘: {                       //需要代理的接口
        target:‘http://39.97.33.178‘, //目标服务器
        changeOrigin: true,       //是否跨域
        pathRewrite: {
          ‘^/api‘: ‘/api‘             //重定向
        }
      }
    },

例如:我需要访问的接口是:http://39.97.33.178/api/cityList,第一行 ‘/api‘ 是一个标识,告诉它只代理接口里面有/api这个字段的接口,我的目标服务器就是http://39.97.33.178,即target定义的,pathRewrite重定向 ‘^/api‘: ‘/api‘ 就是在代理是时候使用/api 代理 http://39.97.33.178/api,使用的时候就可以直接这样使用:

this.$axios.get(/api/cityList).then((res)=>{
    console.log(res)
})

重定向也可以为空 ‘^/api‘: ‘ ‘,使用的时候就需要多加一层:

this.$axios.get(/api/api/cityList).then((res)=>{
    console.log(res)
})

第一个/api 相当于 路径代理到 http://39.97.33.178 ,第二个/api/cityList才是接口里面的路径

 

vue反向代理(解决跨域)

原文:https://www.cnblogs.com/wubaiwan/p/11674332.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!