跨域技术之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的原理,是不是感觉清晰明了?

猜你喜欢

转载自blog.csdn.net/m0_47883103/article/details/108270869