最简单的一个Jsonp实现

223 阅读1分钟

CORS与JSONP的使用目的相同,但是比JSONP更强大。JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。下面用nodejs实现一个最简单的jsonp,在同一个目录下创建两个文件jsonp.html,jsonp.js。jsonp.js文件开启一个本地服务,内容如下:

const http = require('http')const httpServer = http.createServer((req,res)=>{
  const cb = req.url.split('=')[1] //拿到请求的回调函数
  const data = {
      url:req.url //返回请求的url
  }
  var callback = cb+'('+JSON.stringify(data)+');'; //把前端请求的回调函数拼装数据后返回
  res.end(callback)
})
httpServer.listen(8080)

jsonp.html文件只需链入服务的地址,并在全局定义相应的执行函数即可拿到数据

<body>
    <script>
        function handleCallBack(data){
            console.log(data)
        }

        function jsonpCallBack(data){
            console.log(data)
        }
    </script>
    <script src="http://localhost:8080/jsonp?callback=handleCallBack" defer></script>
    <script src="http://localhost:8080/test?callback=jsonpCallBack" defer></script>
</body>