Vue axios 访问跨域问题

场景:Vue页面调用腾讯地图关键字搜索    出现跨域报错

解决方案:

jsonp(url) {
return new Promise((resolve, reject) => {
// 这里的 "jsonCallBack" ,和调用的 jsonp 的 url 中的 callback 值相对应(见粗体字)
window.jsonCallBack =(result) => {
resolve(result)
}
const JSONP = document.createElement('script');
JSONP.type = 'text/javascript';
JSONP.src = url;
document.getElementsByTagName('head')[0].appendChild(JSONP);
setTimeout(() => {
document.getElementsByTagName('head')[0].removeChild(JSONP)
},500)
})
},

 

that.jsonp(
'https://apis.map.qq.com/ws/place/v1/search?output=jsonp&page_size=20&page_index=1&orderby=_distance&key=‘你的key’&boundary=nearby(31.849188%2C117.2661%2C5000)&keyword=%E5%81%9C%E8%BD%A6%E5%9C%BA&callback=jsonCallBack'//关键点  callback要与jsonCallBack一致  不然会报错
).then(function(res){
console.log('返回',res)
}).catch(function (error) {
console.log(error);
});

posted @ 2021-06-21 17:17  宣纸泛黄  阅读(216)  评论(0)    收藏  举报