关于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,就可以成功访问了。
勿喷,大神们可能有更好的办法复制代码
所有评论(0)