跨域解决方案整理笔记

前端之家收集整理的这篇文章主要介绍了跨域解决方案整理笔记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一. 前言

①. 跨域知识:

  • 在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用 jsonp,iframe
  • 要理解跨域,先要了解一下“同源策略”。
  • 所谓同源是指,域名,协议,端口相同。所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西。

②. 跨域阻碍

  • 直接 js 请求非同源服务器接口,会有如下类似报错:
但 :
<img> 的src(获取图片<link>的href(获取css)
<script>的src(获取javascript) 这三个都不符合同源策略,它们可以跨域获取数据

二. JSONP跨域解决方

①. 知识点

②. 代码实现方式

参考网上资源,主要能完成跨域请求可以有三种写法

1). js 实现方式

  • 核心代码如下,使用时只需事件触发即可,源码仅为一个Button按钮
<script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById('btn'); //TODO 小小的点击事件 oBtn.onclick = function() { var script = document.createElement("script"); //TODO 注意最后的 callback参数,此为回调标识 script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script,document.body.firstChild); }; }; //TODO 此处为回调函数 function handleResponse(response){ console.log(response); } </script>

2). jQuery 封装 JSONP

注意:
jQuery封装的$.ajax中有一个dataType属性,如果将该属性设置成 dataType:"jsonp",就能实现JSONP跨域了
需要了解的一点是,虽然 jQueryJSONP 封装在 $.ajax 中,但是其本质与 $.ajax 不一样

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript"> $(function(){ $("#btn").click(function(){ $.ajax({ async : true,url : "https://api.douban.com/v2/book/search",type : "GET",dataType : "jsonp",//TODO 返回的数据类型,设置为JSONP方式 jsonp : 'callback',//指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback //TODO 设置回调函数名,如果不想在下面的 success:function()处理数据, //TODO 可以创建同名方法 handleResponse(response) jsonpCallback: 'handleResponse',data : { q : "javascript",count : 1 },success: function(response,status,xhr){ //console.log('状态为:' + status + ',状态是:' + xhr.statusText); console.log(response); } }); }); }); </script>

3). $.getJSON()

  • 这种方式,代码量极少,只要求在地址中加上callback=?参数即可,也做下参考
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript"> $(function(){ $("#btn").click(function(){ $.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?",function(data){ console.log(data); }); }); }); </script>

③. JSONP的优缺点

1). JSONP的优点

  • 它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的限制;
  • 它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要 XMLHttpRequestActiveX支持
  • 完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback 参数给服务端,然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据,这样客户端就可以随意定制自己的函数自动处理返回数据了.

【据说】:qq空间大部分用的都是 jsonp

2). JSONP的缺点

  • 它只支持 GET请求而不支持POST等其它类型的HTTP请求;
  • 它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript 调用的问题。
  • 登录模块中需要用到 session来判断当前用户登录状态,这时候由于是跨域的原因,前后台的取到的 session 是不一样的,那么就不能就 session 来判断.
  • JSONP是一种脚本注入(Script Injection)行为,所以有一定的安全隐患
  • 通过跨域请求数据,受制于服务端的输出格式,一旦发生变化,很可能自己的项目无可用数据加载,所以一般要选择可信任的第三方服务网站

④. 可行方案思考

万事总有优缺点,不要太过纠结

  • 1.考虑到JSONP 的一系列问题,也可以建议采用 后台进行设置允许跨域请求

    Header set Access-Control-Allow-Origin *

  • 2.为了防止 XSS 攻击我们的服务器, 我们可以限制域,比如

    Access-Control-Allow-Origin: http://www.jb51.cc/cata/107946

⑤. 文章推荐

三. CORS 方案

CORS 全称(跨源资源共享):Cross-Origin Resource Sharing —— W3C推荐的机制

  • 【适用场景】:

承载的信息量大,get 形式搞不定,需选用 post 传输。CORS支持所有类型的传输

  • 【CORS思想】:

使用自定义HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持功能,IE浏览器不能低于IE10。

  • 整个CORS 通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS 通信与同源的 AJAX 通信没有差别,代码完全一样。
  • 浏览器一旦发现 AJAX 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
    因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信

  • 当然如果设置成下面这样,所有的跨域都可以实现了,但这样毕竟太不安全

"Access-Control-Allow-Origin:*";//允许任何域向我们的服务器发送请求
  • 为避免造轮子,相关内容推荐建议参考文章:
  1. —— 最常用的两种跨域解决方案
  2. —— 跨域解决方案一:使用CORS实现跨域
  3. —— 跨域资源共享 CORS 详解(阮一峰)

四. 设置 document.domain方案

推荐参考:document.domain解决跨域问题,详细讲解

  • 原理:相同主域名下不同子域页面,通过设置 document.domain 让他们同域

【限制】:
这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用 document.domain 进行跨域

①. 代码实现方式

// url http://bentos.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.bentos.com/foo'; 
ifr.onload = function() {
  var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
  ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'none';
document.body.appendChild(ifr);
// URL http://b.bentos.com/bar
document.domain = 'bentos.com'
// URL: http://b.bentos.com/foo
var data = {
    foo: 'bar',bar: 'foo'
};
callback(data);

五. window.name 方案

window.name 的美妙之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)

六. CSST (CSS Text Transformation)

概念:一种用 CSS 跨域传输文本的方案。相比 JSONP 更为安全,不需要执行跨站脚本。
原理: 通过读取 CSS3 content 属性获取传送内容

毕竟作为后端开发人员,个人表示对此方案理解起来还是有些难度的.

  • 与 JSONP 安全性比较

七. window.postMessage

  • 原理:HTML5允许窗口之间发送消息
  • 限制:浏览器需要支持HTML5,获取窗口句柄后才能相互通信

window.postMessage 是一个安全的跨源通信的方法
一般情况下,当且仅当执行脚本的页面使用相同的协议(通常都是 http)、相同的端口(http默认使用80端口)和相同的 host(两个页面的 document.domain 的值相同)时,才允许不同页面上的脚本互相访问
window.postMessage 提供了一个可控的机制来安全地绕过这一限制,当其在正确使用的情况下,window.postMessage 解决的不是浏览器与服务器之间的交互,解决的是浏览器不同的窗口之间的通信问题,可以做的就是同步两个网页,当然这两个网页应该是属于同一个基础域名。

多说一点:
这是一个安全的跨域通信方法postMessage(message,targetOrigin) 也是 HTML5 引入的特性。
可以给任何一个 window发送消息,不论是否同源
第二个参数可以是*但如果你设置了一个URL但不 相符,那么该事件不会被分发

  • 看一个普通的使用方式吧
// URL: http://bentos.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('Hello,bar!','http://b.com'); 


// URL: http://baidu.com/bar
window.addEventListener('message',function(event) { console.log(event.data); });
原文链接:https://www.f2er.com/json/288605.html

猜你在找的Json相关文章