JSONP 是如何实现跨域的?

更新日期: 2022-05-28阅读: 947标签: jsonp

JSONP,是 JSON with Padding 的缩写,字面上的意思就是 “填充 JSON”。JSONP 是解决跨域请求的一种方案,我们先了解下跨域请求是什么。


跨域

浏览器在跨域发送 Ajax/fetch 请求时,会触发浏览器的同源策略,导致请求失败。

只要协议、域名、端口有一个不同,那浏览器就会认为是跨域。比如你在  a.com  下通过 Ajax 请求  b.com/api/book ,默认情况下就被浏览器拦截,导致无法获得返回数据


JSONP 怎么跨域?

既然 Ajax 不能发送跨域请求,那我们不用 Ajax,改用 script 标签。

html 下的 script 标签会指向一个脚本地址,这个地址 允许跨域 ,浏览器会加载这个脚本然后执行。

除了 script 标签, link、img 等标签的请求也是允许跨域的。

下面以通过用户 id 获取用户信息为例。

前端实现

在 script 标签的 src 上,我们指定好需要服务器进行填充的回调函数名 setUser,并带上用户 id。

上面这种直接这样写到 HTML 里不太灵活,我们改写成下面这样。

let user = null;

function setUser(user) {
  // 保存用户信息
  window.user = user;
  
  // 输出到页面上,看看效果。
  document.body.append(
    JSON.stringify(user);
  );
}

function getUserById(id) {
  const script = document.createElement('script');
  script.src = `http://b.com:4000/user?id=${id}&callback=setUser`;
  document.body.appendChild(script);
}

document.querySelector('button').onclick = function() {
  getUserById(2);
}

后端实现

然后是服务端的处理,这里我用了 Nodejs 的 Express 框架

const app = express();

// ...

const map = {
  1: { name: 'fe_watermelon' },
  2: { name: '前端西瓜哥' }
};

// 例子:/user?id=2&callback=setUser
app.get('/user', (req, res, next) => {
  const { id, callback } = req.query;
  res.send(`${callback}(${JSON.stringify(map[id])})`);
});

// ...

服务端从 url 的请求字段中提取出 id ,找到对应的用户信息(通常为 JSON 的形式),配合要填充的回调函数 setUser,组装成字符串   setUser({"name":"前端西瓜哥"}) 

这个内容会作为脚本内容返回给前端,前端运行这个脚本后,就会执行全局作用域下的 setUser 函数,这个函数还会拿到用户信息,将其保存下来。


结尾

JSONP 是一种解决跨域的方案,但一般比较少用到。

因为 JSONP 并不是标准,也不安全,服务端代码没写好会有代码注入的风险,且无法防范跨站请求伪造(CSRF)。

我们也注意到要兜住返回的数据,必须定义一个全局的函数,在如今主流的模块化(变量隔离在各个模块中不暴露到全局)写法下有点格格不入。


链接: https://fly63.com/article/detial/11613

Jsonp原理

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

jsonp跨域访问的原理及参数作用

什么是JSONP?先说说JSONP是怎么产生的?不管jQuery也好,ExtJs也罢,又或者是其他支持jsonp的框架,他们幕后所做的工作都是一样的,下面我来循序渐进的说明一下jsonp在客户端的实现

说说JSON和JSONP区别

由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能

原生的js实现jsonp的跨域封装

jsonp是利用浏览器请求script文件时不受同源策略的限制而实现的,伪造一个script标签,将请求数据的url赋值给script的src属性,并将该标签添加到html中,浏览器会自动发送请求,返回的一般时一段js代码,即函数的调用代码。

JSONP原理及其简单封装

一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题;jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变!

使用node.js实现JSONP的实例

JSONP与JSON只有一字之差,我们在使用Jquery的Ajax调用的时候也是使用相同的方法来调用,两者的区别几乎只在于使用的dataType这个属性的不同。但是实际上JSON和JSONP是完全不同的两个东西,JSON是一个数据格式

JSON.stringify() 的深入理解

最近在看《你所不知道的javascript》[中卷]一书,第一部分是类型和语法。本文是基于这部分的产物。在强制类型转换->抽象值操作-> toString 部分,其中对工具函数 JSON.stringify(..) 将 JSON 对象序列化为字符串部分介绍进行了详细的介绍。

让 axios 支持 jsonp

因为不想让再引用新的第三方组件了,所以执念了一下,于是搜索到了下面的代码,调试了一下,发现确实能用,但是存在一个缺陷,就是如果存在连续多次的请求,都会回调到同一个函数上

封装 jsonp请求数据的方法

Jsonp(JSON with Padding) 是 json 的一种\\\"使用模式\\\",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。

跨域解决方案之JSONP

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!