如何使用 JSONP 实现跨域请求？
以下是使用 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属性指向跨域的 URLhttp://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¶m1=value1¶m2=value2。
总结：
使用 JSONP 实现跨域请求是一种比较简单的方法，主要通过客户端定义回调函数并在 <script> 标签中指定，服务器端将数据包装在该回调函数中返回。但由于其仅支持 GET 请求和存在安全隐患，在现代 Web 开发中，CORS 通常是更好的选择。在某些特殊场景下，如需要兼容旧的浏览器或系统时，JSONP 仍然是一个可用的跨域方案。
原文地址：https://blog.csdn.net/qq_25699299/article/details/145264070
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！