jsonp解决跨域请求---nodejs写后端

最新推荐文章于 2023-06-18 13:58:18 发布

大号密码忘了

最新推荐文章于 2023-06-18 13:58:18 发布

阅读量435

点赞数 1

分类专栏： node.js 文章标签：前端 javascript node.js

本文链接：https://blog.csdn.net/qq_59181609/article/details/125453814

版权

node.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：JSONP的本质；

JSONP是前端动态创建 script 标签并添加到页面当中，利用 script 标签的 src 属性不受同源策略限制，向后端请求跨域资源。

二：实现JSONP的大致过程；

需要前后端的配合，前后端协商好一个函数名，发送JSONP跨域请求后，后端返回一个由该函数名命名的函数，函数返回值为后端传给前端的数据，前端在 script 标签中去调用这个函数，拿到函数返回值，即后端传给前端的数据。

也可以灵活的一些，仅有前端单方面决定函数名：

前端在通过 script 的 src 属性发送跨域请求时，携带一个和后端商量好的参数，参数名为想要定义的函数名。后端读取这个传递过来的参数，用这个参数当函数名返回给前端进行函数调用。

三：代码演示；

后端代码---nodejs

// 引入HTTP模块
var http = require("http")
// 引入URL模块
var url = require("url")

// 创建HTTP请求服务器
http.createServer((req,res)=>{
    // 使用内置 url 模块解析url 
    var urlobj = url.parse(req.url,true)
    // 其中的对象属性 query 内容是已经将路由携带的参数解析成对象形式
    console.log(urlobj.query.callback)

    switch(urlobj.pathname){
        case "/api/aaa":
            // 函数名为前端传过来的 callback 值 
            // 函数参数为后端要返回给前端的数据
            res.end(`${urlobj.query.callback} (${JSON.stringify({
                name:"kerwin",
                age:100
            })})`)
            break;
        default :
            res.end("404")
    }
}).listen(3000)

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- jsonp接口调用 -->

    <script>
        // 动态创建 script 标签
        var oscript = document.createElement("script")
        // 携带callback参数传递给后端，test作为函数名
        oscript.src="http://localhost:3000/api/aaa?callback=test"
        // 向页面添加 script 标签
        document.body.appendChild(oscript)

        // 调用后端返回过来的函数
        function test(obj){
            console.log(obj)
        }
    </script>
</body>
</html>