nodejs实现JSONP跨域请求

一、开始

首先我们要明确 JSON 和 JSONP 的区别

  • JSON：JSON 是一种基于文本的数据交换方式，或者叫做数据描述格式
  • JSONP：是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题
    两者不是同一个概念，JSONP 就是利用 src 属性的跨域能力来实现跨域通讯。

二、模拟

  • 我们来实现 html 的代码，其实就是写个回调的方法，以及 script 标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
    <head>
        <title>jsonp</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            function test(data){
                alert(data.name);
            };
        </script>
        <script src="http://localhost:8080/jsonp?callback=test"></script>
    </body>
</html>
  • 之后就是我们 node 端的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var http = require('http')
var url = require('url')
var querystring = require('querystring')
const PORT = 8080；
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]); // 把query参数解析成对象
    // 我们规定如果path是'/jsonp'就是jsonp请求
    if(urlPath === '/jsonp' && qs.callback){
        res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
        var data = {
            "name": "lastnigtic"
        };
        // 相当于是在写一段js代码
        data = JSON.stringify(data);
        var callback = qs.callback+'('+data+');';
        res.end(callback);
    }
});
server.listen(PORT, () => {
    console.log('listening at Port ' + PORT)
});

到了这一步，只要启动服务器，就可以实现我们的跨域请求数据了！