https://www.yunxicoding.top/tags/frontend/ Recent content in Frontend on 云溪的 blog https://www.yunxicoding.top/papermod-cover.png https://www.yunxicoding.top/papermod-cover.png Hugo -- gohugo.io en Sat, 11 May 2019 07:12:56 +0800 https://www.yunxicoding.top/post/cross-origin/jsonp/ Sat, 11 May 2019 07:12:56 +0800 https://www.yunxicoding.top/post/cross-origin/jsonp/ 今天帮助前端小伙伴解决了一下 jsonp 调用腾讯地图 WebService API 报错 Unexpected token : 的问题，这里记录一下解决过程 项目中使用 vue-jsonp 组件来解决跨域问题，使用流程如下 安装 jsonp npm install vue-jsonp main.js 引入 jsonp 组件 import Vue from 'vue' import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 接口调用 const KEY =XXXXXXXXXXXXXX; //key 秘钥自己申请 let url = 'https://apis.map.qq.com/ws/geocoder/v1?&poi_options=address_format=short&get_poi=0'; let locationdata = lat+','+lng //纬度，经度 this.$jsonp(url,{ key:KEY, location:locationdata }) .then(json => { let address = json.result.address; console.log(address) //附近街道地址信息 }) .catch(err => { console.log(err) }) } 本来到了这里应该是完美无缺，开开心心的接受腾讯地图返回的信息就可以了，但是！！，出来了莫名其妙的问题，当请求接口是返回的确是 Unexpected token : 这样的错误。