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