原生实现跨域资源共享JSONP

最新推荐文章于 2021-05-29 08:22:06 发布

原创最新推荐文章于 2021-05-29 08:22:06 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JSONP

笔记专栏收录该内容

31 篇文章

订阅专栏

本文深入探讨了JSONP的工作原理，通过具体实例展示了如何利用script标签的src属性跨域加载数据，并封装了一个getJSON函数用于简化跨域请求过程。同时，详细介绍了前后端如何配合完成JSONP请求与响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSONP的原理是<script src=''></script>script标签内的src可以解析任何符合js语法标准的文件（后缀名不重要，内容重要）
实现原理的代码（方便后面封装的理解）

在请求页面中

<head>
    <script src="http://127.0.0.1:8081/js"></script>
</head>
<script>
	console.log(data);
</script>

开始封装

在请求页面中

 var getJSON=function(url,callback){
     var fnname='fn_'+Math.floor(100*Math.random()+1);
     //随机生成1-100的整数，避免函数名重复
     url=url.replace('*',fnname);
     //将地址中的'*'号替换成随机生成的函数名
     window[fnname]=function(ret){//全局调用函数
         callback(ret);
     }
     window.onload=function(){
         var sp=document.createElement('script');
         //创建一个script标签
         sp.src=url;
         //设置script的src属性
         document.head.insertAdjacentElement('beforeend',sp);
         //插入head中
     }
 }
 getJSON('http://127.0.0.1:8081/js?fnname=*',function(data){
 //？后的fnname=*是传给后端的参数,后端可以通过req.query.参数名，获取到
 //调用封装的getJSON函数
     console.log(data);
 })

被请求页面的路由设置

app.get('/js',function(req,res){
    var data=JSON.stringify({a:1,b:2});
    //传的数据必须是字符串形式
    var fn=req.query.fnname;	
    //获取到前端传的参数
    res.send(fn+'('+data+')');  
    //send的内容必须是字符串（因为src解析的是字符串）
})