跨域技术之jsonp

随着前端的飞速发展，近些年 jsonp技术应用的越来越少，但是我们还是需要详细的去了解jsonp，这对于我们如何去和后台配合有极大的意义

jsonp

众所周知，jsonp是用来进行跨域获取数据的一种方式，至于为什么会有跨域，为什么要跨域，在这里就不做详细的解释了。

废话不多说，直接上代码
前台代码

function backFn(data) {
  console.log(data)
}

<script src="httpsL//wwww.接口地址.com/?参数&callback=backFn"></script>

后台代码

这里用node为例子

服务器名称.get('/接口地址',(request,response) => {
  fs.readFile('数据地址',(error,data) => {
    let resData = `backFn(${JSON.parse(data.toString())})`
    response.send(resData)
    console.log('请求已响应')
  })
})

是不是觉得很懵？别怕，咱们一点一点来分析

• jsonp的原理就是动态的创建一个script标签，通过在src属性上写上接口地址来请求数据
• 请求的接口地址后面一定要跟上一个callback=backFN
• 其中backFn是你在前台已经写好的一个函数，这个函数内部用来接收请求回来的参数，这个参数要和后台协商好
• callback也要和后台协商好，这就像是一个信号
• 后台返回的数据格式一定要是 backFn(包含的数据) 格式

在这里对后端返回的数据格式有严格的要求，仔细看一看，是不是感觉很熟悉
backFn() ，是不是相当于直接执行了在前台我们早就写好的backFn函数，并且把数据
当作参数传了进来

这就是jsonp的原理，是不是感觉清晰明了？