JSONP是跨域资源共享的古老技术吗

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

    • 摘要:
    • 引言:
    • 正文:
      • 1. JSONP的原理🔧
      • 2. JSONP的应用场景🌟
      • 3. JSONP的局限性🚨
    • 总结:
    • 参考资料:

摘要:

本文将介绍JSONP技术的原理和应用场景,以及它在解决跨域资源共享(CORS)问题时的局限性。

引言:

随着互联网的发展,跨域资源共享(CORS)问题日益突出。JSONP是早期解决跨域资源共享问题的技术之一。了解JSONP的原理和应用场景对于前端开发者来说具有重要意义。

正文:

1. JSONP的原理🔧

JSONP是一种利用JavaScript动态创建script标签来请求其他域的JSON数据的技术。当服务器返回JSONP格式的数据时,它将数据包裹在一个函数调用中,这个函数被动态地创建并绑定到指定的回调函数上。

JSONP(JSON with Padding)是一种使用 JavaScript 动态加载外部 JSON 数据的技术。它最初由 Google 提出,现广泛应用于各种前端应用中。

JSONP 的原理是利用 script 标签没有跨域限制的特性,通过动态创建 script 标签,向服务器请求数据。服务器返回的 JSON 数据会被浏览器自动执行。

使用 JSONP 的基本步骤如下:

  1. 创建一个回调函数,用于处理服务器返回的 JSON 数据。
function handleJsonpData(data) {
  console.log(data);
}
  1. 动态创建 script 标签,设置 src 属性为服务器返回 JSON 的 URL,并在 URL 中添加回调函数的名称。
var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleJsonpData';
document.body.appendChild(script);
  1. 服务器返回的 JSON 数据会被浏览器自动执行,从而触发回调函数。

需要注意的是,JSONP 的请求 URL 必须与回调函数的名称一起返回,且回调函数的名称必须全局唯一。

虽然 JSONP 是一种跨域请求数据的技术,但它仅支持 GET 请求,且无法发送 POST 请求。如果需要发送 POST 请求,可以考虑使用 CORS(跨域资源共享)技术。

2. JSONP的应用场景🌟

JSONP主要应用于解决跨域资源共享问题。由于同源策略的限制,浏览器不允许跨域请求,而JSONP可以绕过这个限制,实现跨域数据通信。以下是一些典型的应用场景:

  • 第三方网站通过JSONP获取其他网站的数据,如社交网站分享按钮、评论插件等;
  • 网站通过JSONP获取第三方提供的服务,如天气预报、地图服务等。

3. JSONP的局限性🚨

虽然JSONP可以解决跨域资源共享问题,但它也存在一些局限性:

  • 安全性问题:JSONP容易受到XSS攻击,因为它允许任意JavaScript代码注入;
  • 服务器端支持:服务器端需要支持JSONP,否则无法返回正确的数据格式;
  • 仅支持GET请求:JSONP仅支持GET请求,不支持POST、PUT等其他HTTP方法。

总结:

JSONP是一种古老的跨域资源共享技术,它可以解决部分跨域数据通信问题。了解JSONP的原理和应用场景对于前端开发者来说具有重要意义。然而,由于其安全性问题和局限性,我们应尽量避免在生产环境中使用JSONP。

参考资料:

  • JSONP官方文档:https://developer.mozilla.org/en-US/docs/Web/API/JSONP
  • 同源策略:https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

本文详细介绍了JSONP技术的原理和应用场景,以及它在解决跨域资源共享问题时的局限性。希望对您有所帮助。如有疑问或建议,请随时与我交流。📧🎉

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/536145.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】锁篇

SueWakeup 个人主页:SueWakeup 系列专栏:学习技术栈 个性签名:保留赤子之心也许是种幸运吧 本文封面由 凯楠📸友情提供 目录 本系列专栏 1. MySQ 中的锁 2. 表锁和行锁 表锁 行锁 3. InnoDB 存储引擎的三种行级锁 4. 悲观锁…

【腾讯云 TDSQL-C Serverless 产品体验】饮水机式使用云数据库

云计算的发展从IaaS,PaaS,SaaS,到最新的BaaS,FasS,在这个趋势中serverless(去服务器化) 计算资源发展Physical -> Virtualisation -> Cloud Compute -> Container -> Serverless。 一、背景介绍…

21、矩阵-搜索二维矩阵

思路: 这道题很有意思 从左到有升序,从上到下升序,斜边从左上到右下也是升序,从右上到做下降序。 如果是从左往右依次遍历,就会面临一个问题向右还是向下,因为都是大于当前值,不好决断&#x…

结合fastapi-users与Langserve轻松实现大语言接口用户认证

在做大模型开发的过程中,相信很多小伙伴都是对大模型开发感兴趣,却对 fastapi 这个框架并不熟悉,但是,实际开发的项目确需要用户鉴权,这时候就会很头疼,查阅官方文档发现,官方虽然有例子&#x…

软考123-上午题-【软件工程】-系统设计

一、系统设计 1-1、概要设计 设计软件系统总结结构数据结构及数据库设计编写概要设计文档评审 1-1-1、设计软件系统总结结构 其基本任务是采用某种设计方法,将一个复杂的系统按功能划分成模块; 确定每个模块的功能;确定模块之间的调用关系…

Stable Diffusion之Ubuntu下部署

1、安装conda环境 conda create -n webui python3.10.6 2、激活环境 每次使用都要激活 conda activate webui 注意开始位置的变换 关闭环境 conda deactivate webui 3、离线下载SD 代码 https://github.com/AUTOMATIC1111/stable-diffusion-webui https://github.com/Stabilit…

ZISUOJ 高级语言程序设计实训-基础A

说明&#xff1a; 我这次代码以尽可能简洁的C代码形式给出。 题目列表&#xff1a; 问题 A: 比较大小 思路&#xff1a; 一道简单的if条件判断题。 参考题解&#xff1a; #include <bits/stdc.h> #define endl \n using namespace std; using ll long long; using …

数据治理项目——深铁集团数据治理规划

目录 一、前言 二、数据治理内容与主要措施 2.1 实施背景 2.2 主要举措 2.2.1 制定数据战略目标 2.2.2 绘制数据治理蓝图 2.2.3 绘制数据治理制度 2.2.4 梳理数据资产目录 三、 应用效果 3.1 数据资产可视化管理 3.2 数据标准治理 3.3 集团大数据平台优化建设 一、…

前端服务请求跨域被拦截,Java后端Springboot服务解决办法

跨域问题 跨域前端遇到的问题&#xff1a; Access to XMLHttpRequest at ‘http://www.xxx.xxxx/api/x/d/xc’ from origin ‘http://127.0.0.1:3000’ has been blocked by cors policy: No ‘Access-Contorl-Allow-Origin’ header is present on the requested resource. …

[大模型]Qwen1.5-7B-Chat-GPTQ-Int4 部署环境

Qwen1.5-7B-Chat-GPTQ-Int4 部署环境 说明 Qwen1.5-72b 版本有BF16、INT8、INT4三个版本&#xff0c;三个版本性能接近。由于BF16版本需要144GB的显存&#xff0c;让普通用户忘却止步&#xff0c;而INT4版本只需要48GB即可推理&#xff0c;给普通用户本地化部署创造了机会。&…

3D开发工具HOOPS:推动汽车行业CAD可视化发展

在最近的行业对话中&#xff0c;Tech Soft 3D&#xff08;HOOPS厂商&#xff09;的Jonathan Girroir和Actify的Peter West探讨了CAD可视化在当代企业中的重要性和挑战。作为CAD可视化领域的佼佼者&#xff0c;Actify通过其广受欢迎的Spinfire应用&#xff0c;赋能了全球40多个国…

7.接口自动化测试-Allure报告

1.环境搭建 &#xff08;1&#xff09;下载并解压allure.zip&#xff0c;不要用中文路径&#xff0c;将bin目录配置到path环境变量 官网&#xff1a;Allure下载 &#xff08;2&#xff09;cmd安装allure-pytest第三方库 pip install allure-pytest 检测是否安装成功 pip show …

使用Android Studio制作一个蓝牙软件 ---(一)

一、创建项目&#xff08;项目名称---BluetoothActivity&#xff09; 二、创建HomeActivity页面 1.点击一个文件夹 --- 鼠标右击 --- 新建 --- Acyivity --- Empty Views Activity 三、创建styles.xml 点击 values文件夹 --- 鼠标右击 --- 新建 --- Values Resource File sty…

qt-C++笔记之获取当前文件名所在路径并拼接出新文件路径的一种方法

qt-C笔记之获取当前文件名所在路径并拼接出新文件路径的一种方法 code review! 运行 在 Qt 框架中&#xff0c;QFileInfo 和 QDir类通常用于文件系统信息的查询和目录管理。下面是按照这样一种新颖的步骤来拼接新文件路径的示例代码&#xff1a; #include <QFileInfo>…

DVWA靶场的下载与搭建

目录 什么是靶场 DVWA靶场下载 下载地址 安装 什么是靶场 靶场就是人为提供的带有安全漏洞的服务&#xff0c;每一个学习者都可以在本地快速搭建来实操&#xff0c;回溯漏洞的发生原理以及操作方式。DVWA靶场呢就是一个可以通过浏览器访问的拥有可视化页面的web靶场。 DVW…

K8S之Controller

我们在回顾下pod的启动流程&#xff1a; 用户通过kubectl&#xff0c;向api-server 发起请求api-server接受请求&#xff0c;并将数据写入etcdkube-scheduler通过watch检测到未绑定node 的pod&#xff0c;调度pod到某一node上&#xff0c;并通知给api-server&#xff0c;api-se…

【how2j练习题】HTML DOM部分阶段练习

练习1 <!-- 验证账号是否已经存在 那么就在js使用简单的验证规则&#xff1a; 如果账号是以a或者A开头的&#xff0c;那么就提示已经存在了。 --> <!-- 1.需要一个输入框和一个按钮 2.按钮上绑上一个事件。 3.编写事件&#xff0c;并输出答案 --><html><…

002 数据提取工具 WebPlotDigitizer 使用教程

一、WebPlotDigitizer 安装方法 直接在官网上进行下载 automeris.io&#xff0c;选择右上角的下载按钮&#xff0c;再根据电脑位数选择对应版本进行下载。 下载后将得到一个压缩包&#xff0c;直接解压缩&#xff0c;双击WebPlotDigitizer-4.7.exe即可运行&#xff0c;得到如下…

02 - Git 之命令 +

1 Git相关概念 1.1 以下所谈三个区&#xff0c;文件并不只是简单地在三个区转移&#xff0c;而是以复制副本的方式转移 使用 Git 管理的项目&#xff0c;拥有三个区域&#xff0c;分别是 Working area工作区&#xff08;亦称为 工作树Working Tree&#xff09;、stage area …

贪心算法|435.无重叠区间

力扣题目链接 class Solution { public:// 按照区间右边界排序static bool cmp (const vector<int>& a, const vector<int>& b) {return a[1] < b[1];}int eraseOverlapIntervals(vector<vector<int>>& intervals) {if (intervals.siz…