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>