结合Node手写JSONP服务器剖析JSONP原理

JSONP跨域请求原理

由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全；
可以通过创建动态script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取的方式，称作JSONP (注意：根据JSONP的实现原理，知晓，JSONP只支持 GET请求)

具体实现过程

先在客户端定义一个回调方法，预定义对数据的操作；
再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
客户端拿到服务器返回的字符串之后，当做script脚本去解析执行，这样就能够拿到JSONP的数据了；

通过Node.js，实现JSONP请求例子

客户端:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSONP原理</title>
</head>

<body>
    <script>
        function showInfo(data) {
            console.log(data);
        }
    </script>

    <script src="http://127.0.0.1:3000/getscript?callback=showInfo">
    </script>
</body>

</html>

服务端：
创建一个 xxx.js文件。(我这里用的是app，名字自己取)

// 导入 http 内置模块
const http = require('http')
// 这个核心模块，能够帮助我们解析 URL 地址，从而拿到一个 pathname query
const urlModule = require('url')

// 创建一个 http 服务器
const server = http.createServer();
// 监听 http 服务器的 request 请求
server.on('request', function (req, res) {
    // write your code here....


    // const url = req.url
    const {
        pathname: url,
        query
    } = urlModule.parse(req.url, true)

    if (url === "/getscript") {
        // 拼接一个合法的JS 脚本，这里拼接的是一个方法的调用
        // var scriptStr = "show()"  //这里不要写死

        var data = {
            name: '小明',
            age: 20,
            gender: '纯爷们'
        }

        var scriptStr = `${query.callback}(${JSON.stringify(data)})`

        // res.end 发送给 客户端，客户端去把这个 字符串，当做JS代码去解析执行
        res.end(scriptStr)
    } else {
        res.end('404')
    }
})

// 指定端口号并启动服务器监听
server.listen(3000, function () {
    console.log('server listen at http://127.0.0.1:3000')
})

安装nodemon后：
nodemon xxx.js的路径 运行一下，如图：
在这里插入图片描述

有更加了解的大神，希望给我多多指点！

结合Node手写JSONP服务器剖析JSONP原理

JSONP跨域请求原理

具体实现过程

通过Node.js，实现JSONP请求例子

猜你喜欢