2.jsonp实现跨域

整理下初学时做过的js基础编程题目和大家分享以下，如果大家觉得有用，别忘了点一下赞哦

JSONP跨域的原理
1.img、script等标签的src属性，它不受同源策略限制
2.JSONP请求数据时，服务端返回的时一段可执行的js代码
JSONP用途：解决请求其他服务器时的跨域问题
JSONP局限：只能get方式，需要服务器做一些处理，配置

客户端

<button id="btn">跨域请求按钮</button>
<script>
  let btn = document.querySelector("#btn")
  btn.addEventListener('click',function(e){
    let script = document.createElement('script')
    let name = "xiaoliu" + parseInt(Math.random()*1000,10)
    window[name] = (data) =>{ 
      console.log(data)
    }
    script.src = "http://localhost:3001/jsonp_data?callback=" + name
    document.body.appendChild(script)
    script.onload = (e)=>{
      e.currentTarget.remove()//运行完，删除script标签
      delete window[name]
    }
  })
</script>

服务端

const express = require('express')
let app = express()
app.get("/jsonp_data",(req,res)=>{
  console.log(req.query)
  let callback = req.query.callback
  //返回一段可执行的js代码
  let data = callback + "({'name':'xiaoliu'})"
  res.send(data)
})
app.listen(3001,()=>{
  console.log('小刘的服务器')
})

这里扩展下

event.target：触发事件的事件源对象。
event.currentTarget：事件绑定的那个对象， 也就是绑定处理函数内部的this