JSONP通过script标签跨域请求数据，利用服务器返回函数调用传递结果，仅支持GET、缺乏错误处理且存在安全风险，现代开发推荐CORS或代理方案。
跨域问题在前端开发中很常见，尤其是请求不同域名下的接口时。JSONP 是早期解决跨域问题的一种方案，利用了 标签不受同源策略限制的特性。
JSONP 的基本原理
浏览器不允许 Ajax 请求跨域资源，但 标签可以加载其他域的 JavaScript 文件。JSONP 就是基于这一点，通过动态创建 script 标签来请求数据，服务器返回一段 JavaScript 函数调用，参数就是需要传递的数据。
例如：前端希望获取用户信息，可以这样发起请求：
服务器收到请求后，返回如下内容：
handleResponse({“name”: “张三”, “age”: 25});
浏览器会立即执行这段 JS，只要事先定义了 handleResponse 函数，就能拿到数据。
手动实现 JSONP 请求
可以通过 JavaScript 动态创建 script 标签来实现 JSONP：
定义一个全局回调函数，用于处理返回的数据创建 script 元素，设置 src 为带 callback 参数的 URL将 script 添加到页面中，触发请求请求完成后，移除 script 标签并清理回调函数
示例代码：
function jsonp(url, callback) {
const script = document.createElement(‘script’);
const callbackName = ‘jsonp_callback_’ + Math.round(100000 * Math.random());
window[callbackName] = function(data) {
callback(null, data);
delete window[callbackName];
document.head.removeChild(script);
};
script.src = url + (url.includes(‘?’) ? ‘&’ : ‘?’) + ‘callback=’ + callbackName;
script.onerror = function() {
callback(new Error(‘JSONP request failed’));
delete window[callbackName];
document.head.removeChild(script);
};
document.head.appendChild(script);
}
// 使用方式
jsonp(‘http://api.example.com/data’, function(err, data) {
if (err) {
console.error(err);
} else {
console.log(data);
}
});
JSONP 的局限性
虽然 JSONP 能解决简单跨域问题，但它有明显缺点：
只支持 GET 请求，无法发送 POST、PUT 等方法没有错误处理机制，网络失败或超时难以捕获存在安全风险，容易受到 XSS 攻击，特别是加载不可信域的数据调试困难，报错信息不清晰
现代开发中更推荐使用 CORS（跨域资源共享）来解决跨域问题，服务端设置 Access-Control-Allow-Origin 即可，支持所有 HTTP 方法，安全性更高。
基本上就这些。JSONP 是一种历史方案，在老项目或无法配置 CORS 的场景下仍有使用价值，但新项目建议优先考虑 CORS 或代理转发。不复杂但容易忽略细节。
以上就是jsonp解决跨域问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538510.html
微信扫一扫 
支付宝扫一扫 
