今天又是个在家摸鱼的一天,想 敲一下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后,成功解决了跨域请求的问题