什么是jsonp请求

迷途小码农零零发

已于 2024-09-06 10:06:18 修改

阅读量315

点赞数 3

分类专栏：前端知识库文章标签：数据库前端 javascript react

于 2024-09-06 09:54:05 首次发布

本文链接：https://blog.csdn.net/yiguoxiaohai/article/details/141951756

版权

前端知识库专栏收录该内容

33 篇文章 0 订阅

订阅专栏

JSONP（JSON with Padding）是一种解决跨域请求问题的技术。它允许网页从不同的域名请求数据，而不受同源策略的限制。JSONP 通过动态创建 `script` 标签来实现跨域请求，因为 `script` 标签不受同源策略的限制。

一、工作原理

客户端：客户端创建一个 script 标签，并将其 src 属性设置为目标服务器的 URL，同时附加一个回调函数的名称作为查询参数。
服务器：服务器接收到请求后，将数据包装在回调函数中，并返回给客户端。
客户端：客户端执行返回的脚本，调用指定的回调函数，并处理数据。

二、示例

1. 客户端代码

客户端代码动态创建一个 script 标签，并将其 src 属性设置为目标服务器的 URL，同时附加一个回调函数的名称。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSONP 示例</title>
</head>
<body>
  <h1>JSONP 示例</h1>
  <script>
    function handleResponse(data) {
      console.log('Received data:', data);
    }

    const script = document.createElement('script');
    script.src = 'https://api.example.com/data?callback=handleResponse';
    document.body.appendChild(script);
  </script>
</body>
</html>

在这个示例中，客户端创建了一个 script 标签，并将其 src 属性设置为 https://api.example.com/data?callback=handleResponse。当服务器返回数据时，它会调用 handleResponse 函数，并将数据作为参数传递给它。

2. 服务器代码

服务器接收到请求后，将数据包装在回调函数中，并返回给客户端。

// 假设使用 Node.js 和 Express 框架
const express = require('express');
const app = express();

app.get('/data', (req, res) => {
  const callback = req.query.callback;
  const data = { message: 'Hello, JSONP!' };
  res.send(`${callback}(${JSON.stringify(data)})`);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在这个示例中，服务器接收到请求后，将数据包装在回调函数 handleResponse 中，并返回给客户端。

3. 在 React 中使用 JSONP

在 React 中，你可以使用第三方库如 jsonp 来简化 JSONP 请求。以下是如何在你的 React 组件中实现 JSONP 请求的示例：

import React, { useEffect } from "react";
import jsonp from "jsonp";

const JsonpExample = () => {
  useEffect(() => {
    // JSONP 请求示例
    jsonp("https://example.com/api/data?callback=callbackFunction", null, (err, data) => {
      if (err) {
        console.error(err.message);
      } else {
        console.log(data);
        // 处理 JSONP 响应数据
      }
    });
  }, []);

  return <div>Check the console for JSONP response</div>;
};

export default JsonpExample;

解释

1. 安装 jsonp 库：

npm install jsonp

2. 导入 jsonp 库：：

import jsonp from "jsonp";

3. 在 useEffect 中发起 JSONP 请求：

jsonp("https://example.com/api/data?callback=callbackFunction", null, (err, data) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
    // 处理 JSONP 响应数据
  }
});

三、优缺点

优点

解决跨域问题：JSONP 允许从不同的域名请求数据，而不受同源策略的限制。
简单易用：实现相对简单，只需动态创建 script 标签。

缺点

只支持 GET 请求：JSONP 只能使用 GET 请求，无法使用 POST、PUT、DELETE 等其他 HTTP 方法。
安全性问题：JSONP 存在安全风险，因为它允许执行任意的 JavaScript 代码，可能会导致 XSS（跨站脚本攻击）。
错误处理困难：JSONP 的错误处理相对困难，因为 script 标签的加载错误无法捕获具体的错误信息。

四、总结

JSONP 是一种解决跨域请求问题的技术，通过动态创建 script 标签来实现跨域请求。虽然它有一些优点，但也存在一些限制和安全风险。在现代 Web 开发中，通常推荐使用 CORS（跨域资源共享）来解决跨域问题，因为它更安全且支持更多的 HTTP 方法。

迷途小码农零零发

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
什么是jsonp请求

JSONP（JSON with Padding）是一种解决跨域请求问题的技术。它允许网页从不同的域名请求数据，而不受同源策略的限制。JSONP 通过动态创建 `script` 标签来实现跨域请求，因为 `script` 标签不受同源策略的限制。
复制链接

扫一扫