jsonp 详解 —— 终于搞懂 jsonp 了

M_emory_

已于 2024-03-16 15:11:01 修改

阅读量1w

点赞数 9

分类专栏：一些重要笔记 js 文章标签：前端 node.js js

于 2023-07-02 22:24:55 首次发布

本文链接：https://blog.csdn.net/M_emory_/article/details/131504133

版权

一些重要笔记同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

20 篇文章 2 订阅

订阅专栏

学习一定要一步一个脚印扎实学，最近跟着 kerwin 老师学习 node.js 时，又遇到了jsonp，当看到这个东西的时候感到既熟悉又陌生，只能说之前学的太过草率了，没有对学过的东西做总结。这次我翻阅很多优秀文章和视频，彻底弄懂了 jsonp 是什么东西，并在这里做好记录，方便自己日后查看。

什么是 jsonp ？

JSONP 不是一门编程语言，也不是什么特别的技术，它更像一个漏洞，程序员可以利用这个漏洞，实现跨域（可以简单理解为跨域名）传输数据。在介绍 JSONP 之前，先来介绍一下浏览器的同源策略。

「同源策略」

同源策略是由 Netscape（网景）提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

所谓同源是指域名、协议、端口都相同。以 http://www.xxxxx.com:80/ 为例，http:// 为协议，域名是 www.xxxxx.com，端口是80（提示：80 为默认端口，可以省略，若为其它端口则必须显示定义）。

为了安全，浏览器不允许进行跨域请求。当我们通过 Ajax 在网页和服务器之间发送或接收数据时，需要保证网页与所请求的地址是同源的，否则无法请求成功。同源策略可以防止 JavaScript 脚本从您的网站中读取数据，并将数据发送到其它的网站。如果没有同源策略，很有可能会有恶意的程序泄露您网站中的内容。

虽然同源策略在一定程度上提高了网站的安全，但也会给程序员带来一些麻烦，例如在访问一些开发接口时，由于同源策略的存在，会调用失败。要解决这种问题就需要用到跨域，跨域的方法有许多种，其中最经典的就是 JSONP。

「JSONP」

JSONP 全称“JSON with Padding”，译为“带回调的 JSON”，它是 JSON 的一种使用模式。通过 JSONP 可以绕过浏览器的同源策略，进行跨域请求。

在进行 Ajax 请求时，由于同源策略的影响，不能进行跨域请求，而 <script> 标签的 src 属性却可以加载跨域的 JavaScript 脚本，JSONP 就是利用这一特性实现的。与普通的 Ajax 请求不同，在使用 JSONP 进行跨域请求时，服务器不再返回 JSON 格式的数据，而是返回一段调用某个函数的 JavaScript 代码，在 src 属性中调用，来实现跨域。

JSONP 的优点是兼容性好，在一些老旧的浏览器种也可以运行，但它的缺点也非常明显，那就是只能进行 GET 请求。

jsonp 的应用

1. 服务端 JSONP 格式数据

var http = require("http")
var url = require("url")

http.createServer((req, res) => {
    var urlobj = url.parse(req.url, true)
    console.log(urlobj.query.callback);
    switch (urlobj.pathname) {
        case "/api/aaa":
            res.end(`${urlobj.query.callback} (${JSON.stringify({
                name: '张三',
                age: 21
            })})`)
            break;
        default:
            res.end("404")
    }
}).listen(3000, () => {
    console.log("start");
})

2. 客户端实现 callback 函数

<!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>
        var oscript = document.createElement("script")
        oscript.src = "http://localhost:3000/api/aaa?callback=kerwin"
        document.body.appendChild(oscript)

        function kerwin(obj) {
            console.log(obj);
        }
    </script>
</body>

</html>