其实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}`) } }