几种跨域方法的实现及用法

1. 图像ping

介绍

图像ping是使用<img/>标签。我们知道，一个网页可以从任何网页中加载图像，不用担心跨域不跨域。因此我们可以通过给<img/> 标签的src 赋予我们需要的接口来打到数据交互。

let img = new Image()
img.onload = () => {
  console.log('数据请求成功！')
}
img.onerror = () => {
  console.log('数据请求失败！')
}
img.src = 'http://127.0.0.1:3000/img'

缺点

要知道这个技术有什么作用，我们要先知道它有哪些缺点：我们知道这个技术主要是依赖于浏览器对<img/>标签的默认请求，那么我们就可以知道，这个技术只能发起 GET 请求;那第二个缺点就是我们无法读取到<img/>请求来的服务器响应文本，那么我们如果想要知道服务器给我们发送了什么，那最好的办法就是让<img/>帮我们渲染出来，所以服务器最好是能够返回一张图片；

作用

基于上面的缺点我们图片ping能做的事情就很有限了，比较常用的就是用来跟踪用户点击页面或者统计动态广告的曝光次数

2. JSONP

介绍

JSONP 是JSON with padding (填充式JSON或参数式JSON) 的简写，是应用JSON的一种新方法(2018年来说已经是比较老的方法了),他的形式就是这种

callback(json)

被包裹在函数中的JSON, 所以JSONP其实是由两部分组成的：回调函数和数据

原理

既然说了这么多，那JSONP到底是如何实现的呢？

其实说起来非常简单，JSONP就跟上节的图片ping一样，是通过一个html标签来实现的，这次用到的是<script></script>,使用的时候也是一样，我们只要给它的src赋上我们需要的url就可以了，具体代码如下

// 声明一个回调函数
const handleResponse = data => {
  console.log(data)
}
let script = document.createElement('script')
// callback 后面的值一般来说是要跟回调函数名相同，这里不是固定的，主要是看后端希望你叫什么名字,因为后端也要用到这个名字
script.src = 'http"//127.0.0.1:3000/jsonp?callback=handleResponse'
document.body.insertBefore(script,document.body.firstChild)

作用

JSONP的作用就非常明显了，它可以直接访问到响应文本，支持在浏览器和服务器之间双向通信

缺点

1.因为JSONP它的响应数据实际上是一段js脚本，可能会被夹杂一些恶意的js代码，那么如果我们要访问的数据不是特别安全的话最好不要使用

2.要确定JSONP请求是否失败很不容易，虽然html5给<script> 加了onerror事件，但是到很晚才得到浏览器厂商的支持，所以要用onerror来检测需要考虑兼容性问题

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦