黑马学习记录--VUE-结合node手写JSONP服务器剖析JSONP原理

小咪咪 2022-03-18 14:46 106阅读 0赞

JSONP的实现原理

*  由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
 *  可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
 *  具体实现过程：
    
     *  先在客户端定义一个回调方法，预定义对数据的操作；
     *  再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
     *  服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
     *  客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
 *  通过 Node.js ，来手动实现一个JSONP的请求例子；

// 导入 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) {
    
     // const url = req.url
     const { pathname: url, query } = urlModule.parse(req.url, true)
    
     if (url === '/getscript') {
       // 拼接一个合法的JS脚本，这里拼接的是一个方法的调用
       // var scriptStr = 'show()'
    
       var data = {
         name: 'xjj',
         age: 18,
         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的，参考[传送门][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]  
运行客户端页面

<!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>Document</title>
    </head>
    
    <body>
      <script>
        function showInfo123(data) {
          console.log(data)
        }
      </script>
    
    
    <script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
    
    
    </body>
    
    </html>

用浏览器调试工具即可看到  
![在这里插入图片描述][20190221112151898.png]

[Link 1]: https://blog.csdn.net/qq_37774171/article/details/87824828
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3Nzc0MTcx_size_16_color_FFFFFF_t_70]: /images/20220318/b26f6f7dab6a48d48fa6418341e3ed8f.png
[20190221112151898.png]: /images/20220318/2290e286c8854e1db1bee47357eaa418.png