Node.js 实现jsonp详解

前言

        在初步接触jsonp的时候是在客户端，那时候了解的非常的浅显，只不过是从表象去了解和使用了jsonp ，只知道是是用src导入了一个js脚本,它的原理是什么对于当时的我来说还是很难理解的，直到我学习了node.js自己写了一个jsonp请求。

客户端的jsonp

<button type="button" class="layui-btn layui-btn layui-btn-normal" id="btnJsonp">Jsonp请求</button>

    <!-- 导入jQuery -->
    <script src="./jQuery3.6.0.min.js"></script>
    <script src="./layui-v2.6.8/layui/layui.js"></script>
    <script>
        $(function() {
            $('#btnJsonp').on('click', function() {
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1/api/jsonp',
                    dataType: 'jsonp',
                    jsonpCallback: 'success',
                    success: function(res) {
                        console.log(res);
                    }
                });
            });
        });
    </script>

        启动自己的服务器，按下jsonp按钮就可以发送一个jsonp的跨域请求了；jQuery封装，原理就是动态的生成和删除一个<script src="http://127.0.0.1/api/jsonp"></script> . 可以观察一下ajax的配置项，里面设置了一个jsonpCallback: 'success', 这是用来告诉服务器回调函数名字的这很重要

服务器的jsonp路由

// 导入express
const express = require('express');
// 到入路由模块
const apiRouter = require('./apiRouter');
// 导入cors包
const cors = require('cors');
// 实例server
const app = express();
// 配置jsonp接口 必须写在cors之前否则会变成cors接口
app.get('/api/jsonp', (req, res) => {
    // TODO 定义jsonp的具体实现过程
    // 1 获取客户端发送回来的callback名字
    let callback = req.query.callback;
    console.log(req.query);
    let data = {
        name: '张三',
        age: 22
    };
    // 拼接一个函数调用的字符串
    let Str = `${callback}(${JSON.stringify(data)})`;
    // 把拼接好的字符串交给script解析
    res.send(Str);
});

        这就是核心代码了，可以看到jsonp挂载到server（app）的一个get请求方式的路由，可以在函数内看到 用 let callback = req.query.callback; 获得了回调函数的名字，并且响应出去的Str是用字符串表达的一个以callback命名的函数,将所需要传递出去的参数以形参的形式随着函数发送出去，为什么要这么做呢？？

1 为什么不直接传递参数出来如：res.send({name: '张三',age: 22});

        参数确实是可以传出来的但是客户端无法接受，script标签本质是引入了一段js代码它会立刻被执行；

2 为什么不直接传一个变量出来如: res.send(let obj = {name: '张三',age: 22});

        变量确实也能被传出来在客户端使用的时候只需要在这个script标签下面接收一下：

<script>
console.log(obj)

</script>

但是这个变量是在服务器写好的，但是却在客户端使用，大概率会造成变量污染特别是当代码量一多的时候

3  为解决变量冲突我们很容易就想到局部变量就是写在函数里的形参，但这里有需要解决一个问题，客户端并不知道服务器响应出来函数名字，不知道就无法使用，必须解决函数名字的问题

        这里程序员前辈就想到了用url将函数的名字传出去？callback = ？？？定义了这种格式，在服务器动态拼接函数名字创建函数，客户端用相同的函数名进行接收这时后形参参数也就被传递出来了，由于函数不调用就不会被执行，就可以在客户端放心使用本函数了。——到这里就是完整的jsonp请求了。