<返回更多

前端 Jsonp 跨域方案原理

2023-06-01    埋头苦干的小码农
加入收藏

JSONP(JSON with Padding)是一种常用的跨域数据请求策略,它的基本原理是利用 <script> 标签的 src 属性没有同源策略限制的特性来达到跨域的目的。

我们来详细解析 JSONP 的工作原理:

  1. 构造请求:在前端,我们首先构造一个请求 URL,将需要的数据以查询参数的形式附加到 URL 上。这个 URL 通常还会包含一个特殊的查询参数,例如 callback,用来指定一个回调函数的名称。
  2. 创建 script 标签:然后,我们动态创建一个 <script> 标签,并将其 src 属性设置为上一步构造的 URL。这个 <script> 标签一旦被插入到 html 文档中,浏览器就会开始加载 src 指向的资源。
  3. 服务器响应:服务器接收到请求后,从查询参数中提取数据并进行处理。处理完毕后,服务器将处理结果包裹在一个函数调用中返回。这个函数的名称就是前端在请求中指定的回调函数的名称。
  4. 执行回调函数:当浏览器接收到服务器的响应后,由于响应内容是一个函数调用,所以浏览器会尝试执行这个函数。前端需要预先定义这个回调函数,以处理从服务器接收到的数据。

JSONP 的缺点是只能进行 GET 请求,不能进行 POST 或其他类型的 HTTP 请求。此外,由于是通过插入 <script> 标签的方式获取数据,如果服务器响应的数据中含有恶意脚本,那么这些脚本将会被执行,从而带来安全风险。

由于以上缺点,现在更推荐使用 CORS(跨源资源共享)来进行跨域请求,CORS 不仅支持所有类型的 HTTP 请求,而且更安全。

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>