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

猜你喜欢

转载自blog.csdn.net/hr_beginner/article/details/121409381
今日推荐