一文学会 Jsonp (JSON_with_Padding) 跨域请求

最新推荐文章于 2024-05-07 08:37:45 发布

卡列尼娜翠花

最新推荐文章于 2024-05-07 08:37:45 发布

阅读量717

点赞数 20

分类专栏：小技巧文章标签：前端跨域 jsonp 淘宝 JavaScript 同源策略

本文链接：https://blog.csdn.net/qq_43220213/article/details/137729546

版权

文章目录

流程
缺点
名称由来
demo
JSONP安全性问题
封装工具函数
真实案例：获取淘宝搜索关键字推荐

流程

script 标签 src 属性发起的请求不受同源策略的限制，并且 script 标签默认类型是text/javascript。只要定义了这个类型，则script请求的内容就会被浏览器以JS代码来执行。这就为跨域提供了可能性。

既然可以执行JS代码，那我们就可以用函数包裹真实数据。

定义一个带有形参的函数，将函数名通过url的额外参数传递给服务器，服务器拿到函数后，将函数名拼成函数调用的字符串形式，并将响应数据序列化成字符串，以实参的形式传递给函数，然后返回给客户端。

src 属性请求回来后，因为 script 标签类型是 text/javascript，所以会执行请求回来的代码，也就相当于在执行这个函数。而这个函数的实参就是请求的数据，至此实现了跨域请求数据。

流程：

在发请求先，准备一个前后端约定好的全局接收函数，如 fn
在 html 创建 script 标签，src 带着函数名"fn" 发出请求
服务器传入数据，响应 fn({"name": "ikun"})字符串给客户端
因为是 script 标签，客户端会执行fn({name: "ikun"})，也就是调用了定义的 fn 函数。

数据会自动反序列化进内存

缺点

因为是使用 url 额外参数的形式传递的函数名，url 都是 get 请求，所以 jsonp 也只能支持 get 请求。

名称由来

平常的前后端数据交互一般是 json 格式，现在服务端响应时函数包裹了 json 数据，所以是 json with padding(包裹)，也就是 jsonp。

demo

<body>
  
  <button>Click me</button>
  
  <script>
    
    const createJsonpRequest = (url, callback) => {
     
      return new Promise((resolve, reject) => {
     
        const script = document.createElement("script");
        script.src = `${
       url}?callback=${
       callback}`;
        script.type = "text/javascript";
        script.async = true;
        
        document.body.appendChild(script);
        
        script.onload = () => {
     
          document.body.removeChild(script);
          resolve();
        };
        script.onerror = () => {
     
          document.body.removeChild(script);
          reject();
        };
      });
    };

    document.querySelector("button").addEventListener("click", async () => {
     
      const url = "http://localhost:3000/jsonp";

      await createJsonpRequest(url

最低0.47元/天解锁文章

卡列尼娜翠花

关注

20
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
一文学会 Jsonp (JSON_with_Padding) 跨域请求

严格定义 Content-Type: application/json，然后严格过滤 callback 后的参数并且限制长度（进行字符转义，例如）等，这样返回的脚本内容会变成文本格式，脚本将不会执行。定义一个带有形参的函数，将函数名通过url的额外参数传递给服务器，服务器拿到函数后，将函数名拼成函数调用的字符串形式，并将响应数据序列化成字符串，以实参的形式传递给函数，然后返回给客户端。看一下淘宝的搜索框，关键字联想推荐接口的响应数据格式，就知道这是 jsonp 的接口。
复制链接

扫一扫