使用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}`)
        }
    }