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元无门槛券

手把手带您无忧上云

jsonp跨域实例 js

基础概念

优势

类型

应用场景

示例代码

遇到的问题及解决方法

注意事项

相关·内容

39_尚硅谷_React全栈项目_jsonp解决ajax跨域的原理

为什么后端要配置跨域？

41.后台系统-跨域问题

14. 尚硅谷_面试题_跨域.avi

86.后台系统-整合gateway网关和解决跨域

41-尚硅谷-硅谷课堂-后台系统-跨域问题

27.尚硅谷_JS高级_作用域与作用域链.avi

30.尚硅谷_AJAX-设置CORS响应头实现跨域

20_尚硅谷_Vue项目_配置代理实现跨域ajax请求.avi

58.尚硅谷_JS基础_全局作用域

59.尚硅谷_JS基础_函数作用域

86-尚硅谷-硅谷课堂-后台系统-整合gateway网关和解决跨域

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐