HTML5技术

关于跨域请求 - 空一座旧城,守一个旧人

字号+ 作者:H5之家 来源:H5之家 2017-12-09 08:01 我要评论( )

关于跨域请求 跨域问题的产生: 因为浏览器有同源策略,只有在同域名,同端口,同协议的情况下才可以进行数据交互;有的时候,例如:在公司开发项目的时候,前端开发的服务器可能和后端服务器不是同一个,因为可能是通过gulp、webpack搭建的开发服务器,就需

关于跨域请求

跨域问题的产生:

因为浏览器有同源策略,只有在同域名,同端口,同协议的情况下才可以进行数据交互;有的时候,例如:在公司开发项目的时候,前端开发的服务器可能和后端服务器不是同一个,因为可能是通过gulp、webpack搭建的开发服务器,就需要解决跨域问题,再例如,在大公司数据服务器不只有一个,所以跨域问题也必然存在

一、jsonp解决跨域请求

jsonp是一种前后端结合的跨域方式,原理就是通过script标签的src属性来进行数据请求,src不受同源策略的影响,故而能请求到数据,需要注意的是,数据处理需要通过回调函数来进行,而本质上,我们把回调函数的名字告诉后端,后端将数据放入到回调函数里,所以说需要告知后端,回调函数是什么,这也就是为什么说jsonp是前后端结合的方式。

注意:一个script只能请求一次,多次请求应该去动态的创建script,回调函数也只能使用一次,所以也需要动态创建 ,使用完成后移除,避免污染全局空间

缺点:jsonp只能get请求

1、nodejs代码,配置路由(使用express模块)

.(reqfn content   content ); 2、js代码,返回数据(函数中用到的是es6解构赋值参数) Jsonp({          (results) {  console.log(results) } }) $script = $("") .now() //创建的随机全局函数 window[random_name] (data) //处理完数据之后,将script删掉,函数delete掉 $script.remove() delete window[random_name]  }      $script[random_name  $("body").append($script) }

二、cors解决跨域请求

cors纯后端的解决方式,每次请求都会有一个origin信息被后端捕捉,后端可以通过设置对这个origin的域允许访问来解决跨域问题

1、nodejs代码

reqOrigin (reqOrigin .) .).).);        }        res.send('123') }) 2、js代码获取返回的数据 $.ajax({             success(results){           console.log(results)       } })

三、服务端代理proxy解决跨域请求

因为服务器间的数据交互没有跨域限制,所以我们可以通过一个中间代理服务器来请求目标服务器的数据,也就是开发服务器发送请求到代理服务器,代理服务器再请求目标服务器,将数据返回给开发服务器

1、nodejs代码

(req,res)=>{           //此次请求的源信息           res.send('proxy') }) 2、代理服务器1234: reqOrigin (reqOrigin .) .).).); }      //获取到9000真正要调用的3000目标服务器的接口         var url = req.query['url'] let _res = res result .               result += chunk       }) .log(result) //代理服务器1234将请求到的目标服务器3000的数据返回给开发服务器9000 _res.send(result)  })      }) }) app.listen(1234); 3、js代码,开发服务器9000//当前服务器9000向代理服务器1234发送请求 $.ajax({             },    success(results) {       console.log(results)    } })

posted on

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 关于博客园首页发布规则的若干猜测 - DOM哥

    关于博客园首页发布规则的若干猜测 - DOM哥

    2017-12-05 16:08

  • vue+axios跨域等问题 - 锦峰将将

    vue+axios跨域等问题 - 锦峰将将

    2017-11-19 09:08

  • 关于HTML5手机端页面缩放的问题 - 神仙哥哥灬

    关于HTML5手机端页面缩放的问题 - 神仙哥哥灬

    2017-10-20 14:47

  • 关于h5中背景音乐的自动播放 - 长礼

    关于h5中背景音乐的自动播放 - 长礼

    2017-10-14 08:01

网友点评