node.js之JSONP_node jsonp-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39504042/article/details/89476502

本文介绍了JSONP的概念及其在Node.js中的应用。JSONP是一种通过内联JavaScript函数调用来实现跨域数据传输的技术。在客户端定义函数，然后通过`<script>`标签向服务端发送请求，服务端返回JSON数据包裹在回调函数中。理解JSONP有助于掌握跨域请求和数据传输，特别是当使用ES6语法和JSON格式时，需要注意数据的格式转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSONP的概念

JSONP指带有padding的JSON
格式：getTheAnimal({ "animal": "cat" });
解析：内联于JSON文档的javaScript调用了一个函数，函数参数是JSON。
作用：跨域传输（script标签不受同源策略的影响）
使用：
函数在客户端定义，数据在服务端获取，使用script标签进行数据请求
客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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>

服务端代码：

// 导入 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)

    var data = {
        name: 'xtt',
        age: 18,
        gender:'女孩子'
    }
    if ( url === '/getscript'){
         //拼接一个合法的js脚本，这里拼接的是一个方法的调用
        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')
})

总结： 1.对script标签的理解
2.对跨域请求的理解
3.对于数据传输的理解（es6语法和数据传输为json格式，需要进行json的格式转化）