jsonp跨域实例 js
JSONP（JSON with Padding）是一种跨域数据交互的解决方案，它利用了网页上<script>标签可以跨域加载资源的特性。JSONP请求实际上是动态插入一个<script>标签，通过指定其src属性来加载一个跨域的JavaScript文件，这个文件包含一个回调函数，该回调函数的参数就是服务器返回的数据。
基础概念
- 同源策略：浏览器出于安全考虑，限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
- 跨域：当协议、域名或端口至少有一个不同，就认为是跨域。
- JSONP：通过
<script>标签加载一个跨域的JavaScript文件，该文件执行一个预先定义好的回调函数，并将数据作为参数传递给这个回调函数。
优势
- 兼容性好，支持老的浏览器。
- 实现简单，易于使用。
类型
- 普通JSONP：服务器返回一个函数调用，函数名由客户端指定。
- CORS JSONP：结合了CORS（跨源资源共享）和JSONP的优点，但本质上还是JSONP。
应用场景
- 获取跨域的公开数据，如天气预报、新闻等。
- 在一些老的系统或浏览器中实现跨域数据交互。
示例代码
客户端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP Example</title>
<script>
function handleResponse(data) {
console.log('跨域数据：', data);
}
</script>
<script src="http://example.com/data?callback=handleResponse"></script>
</head>
<body>
</body>
</html>服务器端代码（Node.js示例）：
const http = require('http');
http.createServer((req, res) => {
const callback = req.url.split('=')[1];
const data = { message: 'Hello, JSONP!' };
res.end(`${callback}(${JSON.stringify(data)})`);
}).listen(80, 'example.com');遇到的问题及解决方法
- 安全性问题：JSONP容易受到XSS攻击，因为它允许跨域执行脚本。解决方法是使用CORS或者通过服务器代理来避免直接使用JSONP。
- 只支持GET请求：JSONP只能用于GET请求。如果需要POST或其他类型的HTTP请求，可以使用CORS或者服务器代理。
- 回调函数冲突：如果多个JSONP请求使用相同的回调函数名，可能会导致冲突。解决方法是动态生成回调函数名。
注意事项
- JSONP是一种老旧的技术，现在更推荐使用CORS来实现跨域请求，因为CORS更加安全和灵活。
- 使用JSONP时，应确保请求的服务器是可信的，以避免潜在的安全风险。
随着技术的发展，现代浏览器普遍支持CORS，因此在新的项目中，推荐使用CORS来实现跨域请求。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
