如何使用 JSONP 实现跨域请求？

server/2025/1/21 6:52:33/

以下是使用 JSONP 实现跨域请求的步骤：

实现步骤：

1. 客户端设置

在客户端，你需要创建一个 <script> 标签，并将其 src 属性设置为跨域请求的 URL，并添加一个 callback 参数。这个 callback 参数将包含一个函数名，服务器会将数据作为该函数的参数返回。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSONP Example</title>
</head>
<body><script>// 定义回调函数，用于处理服务器返回的数据function handleData(data) {console.log("Received data:", data);}</script><!-- 使用 script 标签发起跨域请求，指定 callback 参数为 handleData --><script src="http://api.example.com/data?callback=handleData"></script>
</body>
</html>

解释：

首先，我们定义了一个名为 handleData 的函数，该函数将在服务器返回数据时被调用。
然后，我们使用 <script> 标签发起请求，src 属性指向跨域的 URL http://api.example.com/data，并添加 callback=handleData 参数。服务器将把数据包装在 handleData 函数的调用中返回。

2. 服务器端设置

服务器端需要解析请求中的 callback 参数，并将数据作为该函数的参数返回。

示例代码（以 Node.js 为例）：

const http = require('http');http.createServer((req, res) => {// 解析请求 URL 中的 callback 参数const urlParts = req.url.split('?');let callback = '';if (urlParts.length > 1) {const params = urlParts[1].split('&');for (let param of params) {if (param.startsWith('callback=')) {callback = param.split('=')[1];break;}}}// 假设要返回的数据const data = { message: 'Hello from server!' };// 设置响应头为 JavaScript 类型res.writeHead(200, {'Content-Type': 'application/javascript'});// 将数据作为回调函数的参数返回res.end(`${callback}(${JSON.stringify(data)})`);
}).listen(3000);

解释：

首先，我们通过解析请求的 URL 来获取 callback 参数。
然后，我们创建一个要返回的数据对象 data。
接着，我们设置响应头为 application/javascript，因为我们要返回一段 JavaScript 代码。
最后，我们将数据作为 callback 函数的参数，通过字符串拼接的方式返回，例如：handleData({ "message": "Hello from server!" })。

注意事项：

安全性问题：由于 JSONP 是通过 <script> 标签实现的，它可以执行任何 JavaScript 代码，所以你需要确保请求的来源是可信的，以避免安全风险。
仅支持 GET 请求：JSONP 只能使用 GET 请求，因为 <script> 标签不支持其他请求方法。
请求参数：如果需要发送更多的请求参数，可以在 URL 中添加更多的查询参数，例如 http://api.example.com/data?callback=handleData&param1=value1&param2=value2。

总结：

使用 JSONP 实现跨域请求是一种比较简单的方法，主要通过客户端定义回调函数并在 <script> 标签中指定，服务器端将数据包装在该回调函数中返回。但由于其仅支持 GET 请求和存在安全隐患，在现代 Web 开发中，CORS 通常是更好的选择。在某些特殊场景下，如需要兼容旧的浏览器或系统时，JSONP 仍然是一个可用的跨域方案。