JSONP

90 阅读1分钟
概述

jsonp是一种跨域解决方案(本身是get请求),主要是利用script标签的src属性不受跨域影响的特性来解决跨域问题。

同源策略

同源策略是浏览器的一种安全策略(netspace公司提出的),主要是为了保护对应浏览器的数据安全

同源策略解决的问题

避免两个不同的网站的数据共享,比如我的浏览器同时打开京东又打开了淘宝,淘宝是不会获取京东储存在浏览器上的数据的,那么同样京东也不能获取淘宝的数据。

同源策略的要求
  • ip地址相同
  • 端口号相同
  • 域名相同
跨域的产生
  • 在http请求下协议 端口号 域名不一致会产生跨域
  • FTP协议下(文件不同也会跨域) 如果不相同就会产生跨域问题(cors)

image.png

跨域问题的解决

后端添加响应头

image.png

使用JSONP(需要后端的配合)

使用代理(proxy(devserver 开发服务)) 使用webscoket 通信 postmessage(消息队列)

JSONP实现
  • 原理

jsonp它主要利用的是script标签不受跨域的影响的特性来实现的

通过script标签来链入对应的请求地址 传入对应的回调函数 通过访问的时候后端执行这个回调函数 填入对应的值,我们可以通过回调函数的参数来接收返回的数据

  • 特性
  • jsonp本质上是一个get请求,
  • jsonp需要后端进行配合来完成跨域操作。

代码实现

image.png

百度案例实现

image.png

JSONP的封装

回调函数封装

image.png