jsonp实例

最新推荐文章于 2025-05-23 06:48:24 发布

原创最新推荐文章于 2025-05-23 06:48:24 发布 · 716 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp #跨域 #nodejs

JS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种绕过同源策略限制的方法——JSONP，通过一个完整的实战案例，包括前端实现与Node.js服务器端搭建过程，展示了如何利用JSONP进行跨域数据请求。

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

jsonp实例

1.JSONP原理
在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。而JSONP就是通过script节点中的src属性调用跨域的请求。当我们通过JSONP模式请求跨域资源时，服务器返回给客户端一段javascript代码，这段javascript代码自动调用客户端回调函数。

2.前端

<!DOCTYPE html>
<head>
    <title>jsonp</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
    //动态创建script标签，并请求
    function addScriptTag(src){
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.src = src;
        document.body.appendChild(script);
    };
    //在onload后，跨域请求
    window.onload = function(){
        addScriptTag('http://127.0.0.1:8080/jsonp?callback=test');
    };
    //回调函数,必须为全局，不然会报错
    function test(data){
        alert(data.name);
    };
</script>
</body>
</html>

3.搭建node server

//告诉Node.js引入http模块给该服务器应用使用
var http = require('http');
//引入url模块解析url字符串
var url = require('url');
//引入querystring模块处理query字符串
var querystring = require('querystring');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',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 = {
            "name": "Monkey"
        };
        data = JSON.stringify(data);
        var callback = qs.callback+'('+data+');';
        res.end(callback);
    }
    else{
        res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
        res.end('Hell World\n');
    }
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');