欢迎光临
我的个人博客网站

跨域和解决方案:JSONP绕过实现,CORS绕过介绍


题目
  1. 什么是跨域?
  2. JSONP
  3. CORS(服务端支持)
知识点
  • 同源策略
  • 跨域解决方案
同源策略
  1. ajax请求的时候,浏览器基于安全的需求要求当前网页和server端必须同源
  2. 同源:协议,域名,端口,三者必须一致。前端页面请求:http://a.com;请求API:https://b.com/apix/xx , 这两个url不同源,产生跨域问题。
为什么会有JSONP? 因为在HTML标签中有一些标签和属性不受同源策略的限制。其中script就是。
<img src="跨域的图片地址"> 可以用于统计打点,可以使用第三方统计服务??? <link href="跨域的CSS地址"> 可以使用CDN,一般外域 <script src="跨域的js地址"></script> 实现JSONP????具体实现  总而言之,这几个都可以不收浏览器同源策略的限制  
  • 所有的跨域,都必须经过server端的允许和配合
  • 未经过server端的配合就实现跨域,说明浏览器有漏洞,危险!

JSONP的具体实现

前导知识

  • 访问 http://immoc.com ,服务端一定返回html文件吗?答案是否定的。

  • 服务器可以任意动态拼接数据返回,只要符合类型格式即可。

  • 同理于

  • <script scr="http://imooc.com/getData.js"></script> 

所以:就有了JSONP这种跨域的实现方式:就是通过前端动态的创建script标签,借用src属性来发起跨域请求。

  1. script可以跨域
  2. 服务端可以拼接任务数据返回
  3. 所以script就可以经过服务端配合就可以获得跨域数据
JSONP实现

前端页面demo:

//前端页面定义好函数 <script>   window.callback = function(x) {     console.log(x);   }   let script = document.createElement('script');   script.src = "http://localhost/getData.js"; 	btn.addEventListener('click', function() {   	document.body.appendChild(script);   }); </script> 

服务端返回数据:

response.write(`callback({name:"Bob"})`); 

然后浏览器接收到callback({name:”Bob”}); ,根据javascript解析。这里就是直接输出:{name:”Bob”}

CORS-服务端设置http-header来实现跨域—纯服务端的操作!
response.setHeader('Access-Control-Allow-Origin','url');//url填写允许访问的地址 response.setHeader('Access-Control-Allow-Header','X-Requested-With'); response.setheader('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');  //接受跨域的cookie response.setHeader("Access-Control-Allow-Credentails","true"); 
知识点的总结:
  • 同源策略跨域

  • JSONP

  • CORS

赞(0) 打赏
未经允许不得转载:张拓的天空 » 跨域和解决方案:JSONP绕过实现,CORS绕过介绍
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏