跨域解决办法

2019-08-20  本文已影响0人  宋乐怡

同源策略是对XHR的一个主要约束，它为通信设置了“相同的域，相同的端口，相同的协议”这一限制。

默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源。
以下简要说明常用的跨域方法：

其他讲解：

CORS（Cross-Origin Resource Sharing）

CORS背后的思想是，使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应应该是成功还是失败。

CORS的使用方法：
在发送请求时，需要给它附加一个额外的Origin头部，其中包含请求页面的信息（协议，域名，端口），以便服务器根据这个信息决定是否给予响应。

Origin: http://www.nczonline.net

如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息。

Access-Control-Allow-Origin:http://www.nczonline.net

如果没有这个头部，或者有这个头部但是源信息不匹配，浏览器就会驳回请求，正常情况下，浏览器会处理请求。
请求和响应都不包含cookie信息。

IE对CORS 的实现：

微软在IE8中引入了XDR类（XDomainRequest）类型，与XHR相似，但是能实现跨域通信。
XDR使用方法和XHR类似，
（1）创建一个XDomainRequest对象
（2）open() //与XHR不同的是XDR只接受两个参数，请求类型和URL
（3）send()

缺点：
（1）所有的XDR都是异步的，不能用来创建同步请求。
（2）收到响应后，只能访问响应的原始文本，没有办法确定响应的状态码。成功触发onload，响应数组放在xhr.responseText中，失败触发onerror，但是除了错误本身之外，没有其他信息可以用。

XDR也支持
onerror()检测错误
abort()在请求返回前终止请求
timeout属性 超时设定
ontimeout()事件处理程序 超时处理程序

其他浏览器对CORS的实现

Firefox3.5+，Sarafi4+，Chrome，ios版Safari和Android平台中的webkit都通过XHR对象实现了对CORS的原生支持。

使用方法：

要请求另一个域中的资源，使用标准的XHR对象，并在open()方法中传入绝对的URL即可。

对比IE中XDR的优点：
（1）XHR可以访问status和statusText属性
（2）可以发送同步请求

但是出于安全考虑也有一些限制：
（1）不能使用setRequestHeader自定义头部信息。
（2）不能发送接收cookie
（3）调用getAllResponseHeaders()总是返回空字符串。

因为同源请求和跨域请求使用相同的接口，所以建议本地资源使用相对URL，远程资源使用绝对URL，这样能消除歧义，避免出现 限制访问头部或本地cookie信息等问题。

Preflighted Request

支持Preflight请求的浏览器有Firefox3.5+,Safari4+,Chrome

CORS 通过Preflighted Request的透明服务器验证机制支持开发人员使用自定义的GET或POST之外的方法，以及不同类型的主题内容。浏览器向服务器通过高级选项发送一个Preflight请求，服务器可以决定是否允许这种类型的请求。

withCredentials 带凭据的请求

支持withCredentials的浏览器有Firefox3.5+,Safari4+,Chrome,IE10及更早版本都不支持。

默认情况下，跨源请求不提供凭据，（cookie，HTTP认证及客户端SSL等），
通过将withCredentials设置为true，可以指定某个请求应该发送凭证。如果服务器接收带凭据的请求，会用下面的HTTP头部来响应。
Access-Control-Allow-Credentials: true

如果发送的是带凭据的请求，但是服务器响应中没有包含这个头部，那么浏览器就 不会把响应交给JavaScript。

另外，服务器还可以在P热flight响应中发送这个HTTP头部，表示允许源发送带凭据的请求。

跨浏览器的CORS

浏览器对CORS的支持情况不一样，检测XHR 是否支持CORS的最简单的方法就是检查是否存在withCredentials属性，再结合检测XDomailRequest对象（为了IE）是否存在，就可以兼顾所有浏览器了。

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undfined") {
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  return xhr;
}

var request = new createCORSRequest("get", "http://somewhere.com");
if (request) {
  request.onload = function() {
    //
  }
  request.send();
}

XMLHttpRequest和XDomailRequest共同的属性、方法：

DOM跨域之图像ping
var img = new Image();
img.onload = img.onerror = function(){
  alert("DONE");
}
img.src = "http://www.example.com/test?name=songleyi";

利用DOM 中能够执行跨域请求的功能，在不依赖XHR的情况下也能发送某种请求。不需要修改服务器代码

使用<img>标签，我们知道一个网页可以从任何网页加载图片不用考虑跨域，通过动态创建img，使用他们的onload和onerror处理程序来确定是否接收到了响应。

主要应用：
在线广告跟踪浏览量、跟踪用户点击页面，跟踪动态广告曝光次数

JSONP（JSON with padding 填充式JSON/参数式JSON

原理：JSONP 是通过动态创建<script>元素，为src属性指定一个跨域URL。
因为JSONP是有效的js代码，所以在请求完成后就会立即执行。

优点：

缺点：

JSONP与JSON差不多，只不过是包含在函数中的JSON

callback({"name":"songleyi"});

JSONP由两部分组成：回调函数和数据。
回调函数是响应到来时在页面调用的函数，回调函数名字一般在请求中指定。
数据是传入回调函数中的数据。

下面的例子通过查询地理定位服务来显示IP地址和位置信息。

function handleResponse(res) {
  alert(res.ip, res.city, res.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

Comet

Ajax是一种页面向服务器请求数据的技术，而Comet是服务器向页面推送数据的技术。Comet能够让信息几乎实时地被推送到页面上。

实现Comet有两种方式：长轮询 、流。

长轮询 短轮询 ?

长轮询：页面发起一个请求，服务器一直保持连接打开，直到有数据可发送，发送完数据后，浏览器关闭连接，接着浏览器发起一个新请求。这个过程在页面打开期间一直持续不断。

长轮询.png

短轮询：浏览器定时向服务器发送请求，看有没有更新的数据。

短轮询.png

无论长轮询还是短轮询，浏览器都要在接收数据之前，先发起对服务器的链接。
两者最大的区别在于服务器如何发送数据
短轮询是服务器立即发送响应，无论数据是否有效，
长轮询是等待发送响应，

轮询的优势是所有浏览器都支持，通过XHR对象或者setTimeout()就能实现。我们只需要决定什么时候发送请求。

应用：处理体育比赛的分数、股票价格

第二种实现Comet的方式是HTTP流（ flush()+sleep() ）

原理：
不同于轮询，在页面的整个生命周期内只使用一个HTTP连接。具体来说，就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。
所有服务端语言都支持打印到输出缓存然后过了sleep()设置的时间，然后flush()刷新，将输出缓存中的内容一次性全部发送到客户端。这是实现HTTP流的关键所在。

实现逻辑
通过侦听readystatechange事件，检测readystate的值是否为3，3代表接收，已经收到部分响应数据。为3就可以利用XHR对象实现HTTP流。随着不断从服务器接收数据，readystate的值会周期性地变为3，此时，就需要比较此前接收到的数据，决定从什么位置开始获取新的数据。

Web Sockets

原理：同源策略对Web Sockets不适用，因此可以通过它打开任何站点的链接。

上一篇下一篇

猜你喜欢

热点阅读