Vue中proxyTable配置

最新推荐文章于 2023-04-10 16:28:17 发布

weixin_30267697

最新推荐文章于 2023-04-10 16:28:17 发布

阅读量5k

点赞数 1

文章标签： javascript 网络 php ViewUI

原文链接：https://juejin.im/post/5d511dea518825311f429968

版权

关于Vue中使用ajax请求数据时存在跨域问题

Vue在开发中使用的localhost本地服务，而请求的数据则是在服务端http://www.admin.com/php/getData.php，坑定是存在跨域问题，所以需要使用代理来帮我做一些处理来解决跨域问题：

proxyTable: {
  '/api': {
    target: 'http://www.admin.com/', 
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}
复制代码

pathRewrite中^/api的意思就是把/api，替换成''，把左边的内容替换成右边的。

如上图，target直接写成http://www.admin/com即可，然后使用一个标识api来替代当前的主机名，在页面中请求地址写上 this.$ajax.get('api/getData.php')即可。当然这只是在本地服务可以的。

相信很多朋友第一次试用的时候也会遇到这样的问题，打包上线后请求失败，地址错误。很多老司机会教你一个方法，就是在所有接口中把api/删掉。当然了，这个方法是可以的，但是一个项目中有好多接口，如果一个一个的去删除的话，那么，你一天啥都不用干了，只去删接口，然后本地测试你再加回去。如下图就是，线上地址多了一个api，怎么解决呢

proxyTable: {
  '/php': {
    target: 'http://www.admin.com/', 
    changeOrigin: true,
    pathRewrite: {
      '^/php': ''
    }
  }
}

比如还有一个接口http://www.admin.com/php/getMessage.php，
他们中有公共的一个名字，那就是php
把标识中的api使用一个接口中公共的名字，变成入上面代码一样，这样打包上线后你的整个地址就是http://www.admin.com/php/getData.php，就可以成功访问了。


勿喷，大神们可能有更好的办法复制代码

转载于:https://juejin.im/post/5d511dea518825311f429968