当前位置：首页 > news >正文

什么是jsonp请求

news 2025/6/28 7:25:23

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 响应数据}
});