结合Node剖析JSONP原理

最新推荐文章于 2022-08-31 21:26:18 发布

_Boboy

最新推荐文章于 2022-08-31 21:26:18 发布

阅读量584

点赞数 1

文章标签： JSONP node 跨域

本文链接：https://blog.csdn.net/weixin_43720095/article/details/86099957

版权

JSONP跨域请求

由于浏览器的安全性限制，不允许ajax访问，协议不同，域名不同，端口号不同的数据接口，这时可以采用动态创建script标签的形式，将script标签的src属性，指向数据接口的地址（因为script标签不存在跨域限制），这种数据获取方式，称作JSONP（只支持GET请求）

原理实现过程：

1.先在客户端定义一个回调方法，预定义对数据的操作，再把这个回调方法通过url传参的形式，提交到服务器的数据接口；

2.服务器数据接口组织好要发送给客户端的数据，在拿着客户端传递回来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行

3.客户端拿到服务器返回的字符串之后，当做script脚本去解析执行，这样就完成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>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>

服务器node：

app.js

nser快速创建模板

// 导入 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 data = {
      name: 'ZBY',
      age: 21,
      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')
})