js跨域的几种实现方式

通过ajax请求服务器数据,默认情况下,只能请求或访问与包含它的页面位于同一个域中的数据,这种限制来源于浏览器的跨域安全策略(同源策略)。这种安全策略可以预防某些恶意行为。但是,某些合理党的跨域资源共享是合理的,也是非常重要的。目前来说,实现跨域的主要方法有两种,Cors和Jsonp。
1、Cors(Cross Origin Resource Share,跨域资源共享)
Cors实现跨域的思想是利用自定义的Http头部,让服务器和浏览器进行沟通,最终决定发出的请求或相应是否用该成功。
服务器接收浏览器请求时,解析头部信息,可以知道该请求来源等等信息,从而决定是否响应该请求。
在返回请求时,自定义下面几个http头,可以让浏览器成功接收跨域信息。
Acess-Control-Allow-Origin:允许请求的域
Acess-Control-Allow-Methods:允许的方法
Acess-Control-Allow-Headers:允许的头部
Acess-Control-Allow-Max-Age:请求缓存的时间
例如:某个ajax请求url为http://forexample.com/getData,则在服务器设置响应头Acess-Control-Allow-Origin为http://forexample.com,浏览器就可以正常接收跨域信息。
2、Jsonp
浏览器虽有同源策略,但有一些东西是例外的,script,link标签等等,可以请求任何网页的资源,而不用担心跨域问题。利用这个特性,可以实现跨域访问。代码如下:
callback是跨域请求成功时执行的回调函数。

function handle(){
   console.log('跨域请求');
}
let script = document.createElement('script');
script.src = 'http://forexample.com/getData?callback=handle'
document.body.insertBefore(script,document.body.firstChild);

img标签也可实现跨域,原理与script标签类似,不赘述。
上面两种方法就跨域访问的常用方法,欢迎大家批评指正。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值