uniapp 使用腾讯地图 H5端跨域解决方法（手写jsonp）

问题

项目中使用腾讯地图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依赖包了

文章大致架构参考此博客