记录--求你了，别再说不会JSONP了-Toy模板网

这篇具有很好参考价值的文章主要介绍了记录--求你了，别再说不会JSONP了。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

JSONP是一种很远古用来解决跨域问题的技术，当然现在实际工作当中很少用到该技术了，但是很多同学在找工作面试过程中还是经常被问到，本文将带您深入了解JSONP的工作原理、使用场景及安全注意事项，让您轻松掌握JSONP。

JSONP是什么？

JSONP，全称JSON with Padding，是一项用于在不同域之间进行数据交互的技术。这项技术的核心思想是通过在页面上动态创建<script>标签，从另一个域加载包含JSON数据的外部脚本文件，然后将数据包裹在一个函数调用中返回给客户端。JSONP不仅简单而且强大，尤其在处理跨域数据请求时表现出色。

JSONP的工作原理

JSONP的工作流程如下：

客户端请求数据：首先，客户端会创建一个<script>标签，向包含JSON数据的远程服务器发出请求。这个请求通常包括一个名为callback的参数，用来指定在数据加载完毕后应该调用的JavaScript函数的名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP Example</title>
</head>
<body>
    <h1>JSONP Example</h1>
    <div id="result"></div>

    <script>
        // 定义JSONP回调函数
        function callback(data) {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = `Name: ${data.name}, Age: ${data.age}`;
        }

        // 创建JSONP请求
        const script = document.createElement('script');
        script.src = 'http://localhost:3000/data?callback=callback';
        document.body.appendChild(script);
    </script>
</body>
</html>

服务器响应：服务器收到请求后，将JSON数据包装在指定的回调函数中，并将其返回给客户端。响应的内容类似于：

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();

// 定义一个简单的JSON数据
const jsonData = {
  name: 'John',
  age: 30,
};

// 添加路由处理JSONP请求
router.get('/data', (ctx) => {
  const callback = ctx.query.callback;
  if (callback) {
    ctx.body = `${callback}(${JSON.stringify(jsonData)})`;
  } else {
    ctx.body = jsonData;
  }
});

// 将路由注册到Koa应用程序
app.use(router.routes()).use(router.allowedMethods());

// 启动Koa应用程序
const port = 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});