请选择 进入手机版 | 继续访问电脑版

什么是JSONP,它的作用是什么

前端开发  / Javascript  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-5-12

跳转到指定楼层

JSONP是一种绕过同源策略从第三方服务器加载数据的方法

默认情况下,您无法从非当前域和端口加载JSON文件,而无法在应用程序中使用它。

您可以从中提供应用程序localhost:8080,但该API由在上运行的另一个Node.js应用程序提供localhost:2001

或者,您可能想在浏览器中访问一些公开可用的用作JSON的API。

这是使用API的普遍需求,但是出于安全原因,在浏览器中我们受到限制,由于同源策略,默认情况下必须拒绝此行为以防止可能的问题。

JSONP是在CORS存在之前诞生的。如今,CORS是解决问题的一种(唯一的?)明智的方法,但是了解JSONP很有用,这对于您的情况可能更好。此外,自JSONP诞生以来,就发现了一些安全问题,因此您需要了解使用JSONP的所有安全隐患

JSONP仅支持GETHTTP方法,因此它的功能远不及CORS。

它是如何工作的

服务器必须支持JSONP,例如Express允许您使用该Response.jsonp()方法,该方法类似于Response.json()但处理JSONP回调:

res.jsonp({ username: 'Flavio' })

在客户端,您加载指定回调函数的端点:

<script src="http://localhost:2001/api.json?callback=theCallbackFunction"></script>

回调函数必须是将接收JSON数据的全局函数:

const theCallbackFunction = (data) => {
  console.log(data)
}

jQuery通过在其ajax()方法中抽象JSONP来方便地简化此方法:

$.ajax({
  url: 'http://localhost:2001/api.json',
  dataType: 'jsonp',
  success: (data) => {
    console.log(data)
  }
})
转播转播
回复

使用道具

成为第一个评论人

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

qqpite

网站编辑

  • 主题

    245

  • 帖子

    248

  • 关注者

    0

手机版|ObjectX 超对象 |粤ICP备20005929号
Powered by  © 2019-2020版权归ObjectX 超对象