axios get怎么还会显示跨域_记Vue.js使用Axios进行跨域请求的方法

今天又是个在家摸鱼的一天，想 敲一下BUG 写个在线翻译功能。

随之就取下了百度翻译开放平台技术文档中的示例接口地址，试试能否正常请求下来。

用axios来请求，真香

axios.get('http://api.fanyi.baidu.com/api/trans/vip/translate?q=apple&from=en&to=zh&appid=2015063000000001&salt=1435660288&sign=f89f9594663708c1605f3d736d01d2d4')

.then((response) => {

console.log(response);

})

.catch((error) => {

console.log(error);

})

这个故事告诉我们，再好玩的请求，这个No Access-Control-Allow-Origin header is present on the requested resource也一定不会忘记砸到你的头顶！

很明显，这是因为跨域而导致的请求失败。

解决跨域请求的问题

1.打开config/index.js文件

2.在index.js中找到以下代码

module.exports = {

dev: {

proxyTable: {}

}

}

3.将代码中的proxyTable修改成如下所示

proxyTable: {

'/api': {

target: 'https://www.barben.cn', // 写上要调用接口的域名和端口，记得要加上http。

changeOrigin: true,

pathRewrite: {

'^/api': '' // 这里理解成用/api来代替target中的地址，调用接口时就直接用/api代替。比如说我要调用https://www.barben.cn/request/ts接口，就直接写/api/request/ts即可。

}

}

}

4.重新启动整个项目

修改完proxyTable后，成功解决了跨域请求的问题