细说跨域

1.原理

 什么是跨域

  跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。

源(origin)指的是协议、域名、端口号,同源指的是在url中协议、域名、端口号均相同。那么同源策略是浏览器的一个安全功能,不同源的脚本在没有明确授权的情况下,不能读写对方资源。 

同源策略限制了一下行为:

  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM 和 JS 对象无法获取
  • Ajax请求发送不出去

 ps:对于像 img、iframe、script 等标签的 src 属性是特例,它们是可以访问非同源网站的资源的。

2.常用的几种跨域处理方法:

 1、JSONP

 2、CORS策略

 3、document.domain+iframe的设置

 4、HTML5的postMessage

 5、使用window.name来进行跨域

3.细说CORS策略

  我们都知道由于浏览器的同源策略导致ajax无法进行跨域传输,那么CORS这种方法就就是突破浏览器限制来进行传输。当数据发送给对方域名的时候,对方已经收到,但是在返回的时候被浏览器给阻挡,我们可以写一串类似于身份证的字符串,通过浏览器的预检,从而达到数据的传输。

  随着技术的发展,现在的浏览器可以支持主动设置从而允许跨域请求,即:跨域资源共享(CORS,Cross-Origin Resource Sharing),其本质是设置响应头,使得浏览器允许跨域请求。

  CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

  实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信

#* 简单请求 OR 非简单请求
#条件:
1、请求方式:HEAD、GET、POST
2、请求头信息不超出一下这几个字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 对应的值是以下三个中的任意一个
application/x-www-form-urlencoded
multipart/form-data
text/plain

#注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求

* 简单请求和非简单请求的区别?

#简单请求:一次请求
#非简单请求:两次请求,在发送数据之前会先发一次请求用于做“预检”,只有“预检”通过后才再发送一次请求用于数据传输。

 非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUTDELETE,或者Content-Type字段的类型是application/json

  非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

* 关于“预检”

  浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

#- 请求方式:OPTIONS
#- “预检”浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段,
只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错
#- 如何“预检” # => 如果复杂请求是PUT等请求,则服务端需要设置允许某请求,否则“预检”不通过 Access-Control-Request-Method # => 如果复杂请求设置了请求头,则服务端需要设置允许某请求头,否则“预检”不通过 Access-Control-Request-Headers

方法:在前端做处理或在服务端做相关处理

 

posted @ 2018-12-10 13:12  似是故人来~  阅读(306)  评论(0编辑  收藏  举报