问题
项目中使用腾讯地图sdk或者webService api h5端出现跨域问题
解决方法
1. 实现一个jsonp函数
原理:动态生成一个JavaScript标签,其src由接口url、请求参数、callback函数名拼接而成,利用js标签没有跨域限制的特性实现跨域请求。
const jsonp = function(url, data) {
return new Promise((resolve, reject) => {
// 1.初始化url
let dataString = url.indexOf('?') === -1 ? '?' : '&'
let callbackName = `jsonpCB_${ Date.now() }`;
url += `${ dataString }callback=${ callbackName }`
if(data) {
// 2.有请求参数,依次添加到url
for(let k in data) {
url += `&${ k }=${ data[k] }`
}
}
let scriptNode = document.createElement('script');
scriptNode.src = url;
// 3. callback
window[callbackName] = (result) => {
result ? resolve(result) : reject('没有返回数据');
delete window[callbackName];
document.body.removeChild(scriptNode);
}
// 4. 异常情况
scriptNode.addEventListener('error', () => {
reject('接口返回数据失败');
delete window[callbackName];
document.body.removeChild(scriptNode);
}, false)
// 5. 开始请求
document.body.appendChild(scriptNode)
})
}
2. 发起请求,需要注意参数中 output: jsonp,你也可以写成promise then,参考原博客点击此处
async function getData() {
let res = await jsonp('https://apis.map.qq.com/ws/location/v1/ip',{
key: "xxxxxxx",
output: "jsonp"
});
console.log(res);
}
getData();
否则会发生报错:
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://apis.map.qq.com/ws/location/v1/ip?callback=jsonpCB_1626785944415&key=xxxxxx with MIME type application/json.
3. 这样就可以解决跨域问题不用使用vue-jsonp依赖包了
文章大致架构参考此博客