jsonp数据

最新推荐文章于 2023-07-02 22:24:55 发布

星辰大海_enoch

最新推荐文章于 2023-07-02 22:24:55 发布

阅读量99

点赞数

分类专栏： Node.js

本文链接：https://blog.csdn.net/u012872771/article/details/103721159

版权

Node.js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

古老的跨域方法，已经逐步被CORS淘汰，但对后台来说，就是一个GET请求而已。民间标准。
缺点：对权限松散，安全性差。
CORS是ajax的增强，

普通ajax通过监听onredyStatusChange来控制是否完成。

jsonp的连接样子：
http://localhost:8080/a?n1=15&n2=77&cb
=>show(92)
服务端代码：

const Koa = require("koa");
const Router = require("koa-router");
const static = require("koa-static");
const opn = require("opn");

let router = new Router();
let server = new Koa();
server.listen(8000);


router.get('/a', async ctx=>{
    let {n1, n2, cb} = ctx.query;
    n1 = parseInt(n1);
    n2 = parseInt(n2);
    ctx.body=`${cb}(${n1 + n2})`;
})
server.use(router.routes());
// static
server.use(static('./static'));

opn("http://localhost:8000/a?n1=15&n2=77&cb=show")

在这里插入图片描述
前端代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域</title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        (async ()=>{
            let data = await $.ajax({
                url: 'http://localhost:8000/a',
                dataType: 'jsonp',
                data: {
                    n1:80,
                    n2: 19
                },
                jsonp: 'cb'
            })
            alert(data);
        })();
    </script>
</body>
</html>