使用fetch-jsonp进行跨域以及参数的传递

其实fetch-jsonp的官方文档里面已经写得很详细了，连接如下：https://github.com/camsong/fetch-jsonp；但是由于它本身没有多少demo，所以自己在上手的时候遇到了许多问题，比如说：传参；

首先，我有一个PHP文件需要跨域获取，如下（获取QQ信息）：

<?php
header("Access-Control-Allow-Origin:*");
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with, content-type');

function getKey($key, $default = "")
{
    return trim(isset($_REQUEST[$key]) ? $_REQUEST[$key] : $default);
}

$qq = getKey("qq");
if (!empty($qq) && is_numeric($qq) && strlen($qq) > 4 && strlen($qq) < 13) {
    $qqName = file_get_contents('http://r.pengyou.com/fcg-bin/cgi_get_portrait.fcg?uins=' . $qq);
    if ($qqName) {
        $qqName = mb_convert_encoding($qqName, "UTF-8", "GBK");
        echo $qqName;
    }
} else {
    echo 0;
}
　

　

jq的jsonp:

   $.ajax({
        method:"POST",
        url:"http://fm.xiaofany.com/APIpage/qq.php",
        data:{"qq":1393622322},
        dataType: "jsonp",
        jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonpCallback: "portraitCallBack",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
        success:data =>{
            console.log(data)
        },
        error:error =>{
            console.log(`error为${error.data}`)
    }
    })

获取到的数据如下：

 

然后我用fetch-jsonp的时候，看它的源码，他是通过拼接script，传递src的方式来跨域的，于是只能是GET方法，但是如何传值呢，其实很简单，只需要在url后面拼接就可以啦：

        try {
            let getText = async () => {
                let promise = await fetchJsonp("http://fm.xiaofany.com/APIpage/qq.php?qq=789234894", {
                        jsonpCallbackFunction: 'portraitCallBack'
                    })
                ;
                let dataS = promise.json();
                dataS.then(data => {
                    console.log(data);
        
                })
            };
            getText()
        } catch (error) {
            console.log(`错误为${error}`)
        }
    }