ajax跨域之jsonp

跨域之jsonp

jsonp跨域原理

　　

脚本便签可以跨域,基于这个机制,可以在一个域的页面中定义jsonp函数,脚本标签返回这个函数的调用

　　 　　

如下代码所示
一个域页面代码

　　

 <代码类=" language-html "> & lt; body>
　　& lt; div>正在获取数据……& lt;/div>
　　jsonp & lt; script>功能(数据){
　　document.querySelector (div)。innerHTML=数据;
　　}
　　& lt;/script>
　　B & lt; !——向域请求数据——比;
　　& lt;脚本src=" http://127.0.0.1:3000 data.js "祝辞& lt;/script>
　　& lt;/body>  

　　

B域服务器代码

　　

 <代码类="语言javascript ">
　　const高雅=要求(“高雅”)
　　const bodyParser=要求(“koa-bodyparser”)
　　const应用=new高雅()
　　const util=要求(“。/util”)//bodyParser插件,处理后提交过来的数据
　　app.use (bodyParser ())
　　app.use(异步ctx=比;{
　　const url=ctx.url
　　util.log(“访问地址:$ {url};请求方法:$ {ctx.method} ')
　　如果(url.indexOf ('/data.js ')===0){//首页
　　ctx。集(“内容类型”,“应用程序/x-javascript”)
　　ctx。身体=" $ {ctx.query。回调| |“jsonp”}(“哈哈哈哈,jsonp可以的!”)“//返回方法的调用
　　其他}{
　　ctx。状态=404
　　ctx。身体=' 404 '
　　}
　　}）
　　app.listen(3000年,()=比;{
　　跑龙套。日志(“服务启动,打开http://127.0.0.1:3000”)
　　}）
　　 之前
　　
结果如下:
  
ajax跨域之jsonp