JSONP解决跨域问题

JSONP概述：JSONP是利用了<script>标签可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早期一些浏览器不支持CORS时，可以靠JSONP解决跨域。
基本流程：

第一步：客户端创建一个<script>标签，并将其src属性设置为包含跨域请求的URL，同时准备一个回调函数，这个回调函数用于处理返回的数据。
第二步：服务端接收到请求后，将数据封装在回调函数中并返回。
第三步：客户端的回调函数被调用，数据以参数的形势传入回调函数。

图示

JSONP解决跨域

代码示例：

html

<button onclick="getTeachers()">获取数据</button>

<script type="text/javascript" >
  function callback(data){
    console.log(data)
  }

  function getTeachers(url){
    // 创建script元素
    const script = document.createElement('script')
    // 指定script的src属性
    script.src= 'http://127.0.0.1:8081/teachers'
    // 将script元素添加到body中触发脚本加载
    document.body.appendChild(script)
    // script标签加载完毕后移除该标签
    script.onload = ()=>{
      script.remove()
    }
  }
</script>

jQuery封装的jsonp

$.getJSON('http://127.0.0.1:8081/teachers?callback=?',(data)=>{
  console.log(data)
})

JSONP解决跨域问题 ​

JSONP解决跨域问题