关于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

Logo

前往低代码交流专区

更多推荐