Json   发布时间:2022-04-22  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了json - 前端跨域-JSONP大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

前端跨域方案有很多种,这次介绍的是JSONP。

一、什么事跨域

受浏览器的同源策略的约束,访问不同的域名加协议、端口(三者任意一个不同)的资源将会照成跨域问题。

二、JSONP

JSONP,JSON with Padding(填充式json或参数式json的缩写),是 json 的一种”使用模式”。

由于<script>标签不受同源策略的约束,它可以载入任意地方的 JavaScript 文件,而jsonp就是利用的这一缺陷。他的基本原理就是通过动态创建<script>标签,然后把src指向服务端地址,而这个地址后面跟个参数callBACk=***,服务端在返回数据时,在***放置一个方法,相当于在前端执行***这个方法,所以在请求前我们需要给window绑定这个方法

三、实现

客户端

如果直接进入页面后就要进行跨域,可以直接写HTML元素:

<script>
function jsonpCallBACk(data) {
    console.log(data);
}
</script>
<script src="http://127.0.0.1:8088/jsonp?callBACk=jsonpCallBACk" type="text/javascript"></script>

要注意的是jsonpCallBACk要先定义,否则会执行该函数出错。

或者我们可以动态的创建<script>标签,并添加页面中的方式加载:

<script type="text/javascript">
function startJsonp() {
    var script = document.createElement('script');
    script.src = 'text/javascript';
    script.src = 'http://127.0.0.1:8088/jsonp?callBACk=jsonpCallBACk';
    document.body.appendChild(script);
}

function jsonpCallBACk(data) {
    console.log(data);
}

startJsonp();
</script>

当然,这两种方式没有本质的区别。

服务端

后端使用NodeJS实现:

var http = require('http'),url = require('url'),queryString = require('queryString'),server = http.createServer();
// request请求
server.on(@R_801_6285@equest',function(req,res){
    var urlPath = url.parse(req.url).pathname;
    var qs = queryString.parse(req.url.split('?')[1]);
    if (urlPath === '/jsonp' && qs.callBACk){
        res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
        var data = {
            "Hello": "world"
        };
        data = JSON.Stringify(data);
        var callBACk = qs.callBACk+'('+data+');';
        res.end(callBACk);
    }
}).listen(8088);

当请求的路径是/jsonp时,我们会去将callBACk和数据返回给浏览器,而浏览器则会调用window下的该方法,所有我们可以在控制台上看到打印的数据。

JSONP用起来的话,其实也是很简单的,且对于信任的域,这样调用资源也是很方便的。需要注意的是JSONP只支持GET请求,不支持POST请求。

大佬总结

以上是大佬教程为你收集整理的json - 前端跨域-JSONP全部内容,希望文章能够帮你解决json - 前端跨域-JSONP所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: