使用fetch-jsonp js库实现跨域请求

由于<script>标签的加载不受浏览器同源策略限制,因此可以通过动态创建<script>标签的原理来实现跨域通信

原生实现:

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
</script>

使用fetch-jsonp库实现,以腾讯位置服务的webserviceAPI为例
npm install fetch-jsonp --save
npm install querystring --save
import jsonp from 'fetch-jsonp'
import querystring from 'querystring';//用于编码get参数
const str = querystring.encode({
    keyword: 'xxx',
    region: 'xxx',
    output: 'jsonp',
    key: 'xxx'
});
jsonp(`https://apis.map.qq.com/ws/place/v1/suggestion?${str}`)
    .then(response => response.json())
    .then(d => {
        if (mapSearchCurrentValue === value) {
            const result = d.data;
            const data = [];
            result.forEach(r => {
                data.push({
                    value: JSON.stringify(r.location),
                    text: `${r.title}(${r.address})`,
                });
            });
            callback(data);
        }
    });

 

注意:

第一次.then()获取到的response不是json格式而是jsonp的数据流,需要进行一次转化,

第二次.then()获取到的才是与普通restapi返回的数据类型一致

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/3458.html

发表评论

登录后才能评论