1.什么是跨域

下面的这些情况是属于跨域的:

  • 协议不同,如http, https;
  • 端口不同;
  • 主域相同,子域不同;
  • 主域不同;
  • ip地址和域名之间也算是跨域,浏览器不会自动做ip域名的映射;

2.跨域不能访问的原因

说到跨域,一般人都有一个模糊的概念,大概就是从一个域名的网页去访问了另一个域名的资源,获取失败了。

但是跨域产生的原因,有些人可能就没了解过。

跨域的原因

跨域时不能获取资源,并不是服务器做了一些限制。而是浏览器做的限制

没错,你写一个ajax跨域请求时,打开F12调试,会发现在response里面是拿到了服务器返回的数据的。由此可以看出服务器并没有对跨域做限制,数据通信是正常的。

问题出现的原因,就是浏览器判断了该请求是跨域请求,所以即使从服务器拿到了数据,也不显示给你。并且提示你出错了,跨域请求了。

所以,现在一般人在说跨域的时候都在说ajax跨域问题,js跨域问题,这个叫法是不对的,应该改成,浏览器的跨域问题

3.为什么浏览器会有跨域限制

如果浏览器不做跨域限制,会出现安全问题。
比如可以做下面的攻击:

1.用户登录了自己的银行页面 http://mybank.com,http://mybank.com向用户的cookie中添加用户标识。

2.用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。

3.http://evil.com向http://mybank.com发起AJAX HTTP请求,请求会默认把http://mybank.com对应cookie也同时发送过去。

4.银行页面从发送的cookie中提取用户标识,验证用户无误,response中返回请求数据。此时数据就泄露了。

5.而且由于Ajax在后台执行,用户无法感知这一过程。

4.跨域有哪些解决方法

解决方案:

  • document.domain
  • window.name
  • jsonp
  • postMessage
  • cors

1.通过jsonp跨域

  • 关键点:浏览器对XHR做了同源策略,但并没有将这种方式延续到script上(其实还有iframe,img等),从而可以利用动态script标签技术来做到跨域请求的作用。至于为什么会这样设计,本人也不太清楚,有可能是历史遗迹(漏洞),有可能是某些方面的技术瓶颈,也有可能是为了满足某些需求专门定制的,总之这项技术方案我们过去可以用,现在可以用就ok,至于将来应该也是会存在的,毕竟现在已经应用在很多家站点上,就算会废弃,也会有一段时间迭代。
  • 兼容性:所有浏览器都兼容这种方式;
  • 优点:很明显前端可以很轻松的做到跨域请求;
  • 缺点
    只能通过GET方式请求,一方面是参数长度有限制,二是安全性比较差;
    后端需要知道前端的cb是什么样的结构,主要在参数和回调名;
    后端需要进行参数和cb的拼接然后才能执行;

2.跨域资源共享(CORS)

CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。

  • 关键点:cors是一种通过前后端http header配置来进行跨域的一种方式;
  • 兼容性:如果不考虑pc端的IE,移动端的opera的话那兼容性还是不错的,针对ie和opera可以做适当的降级处理;
  • 安全策略
    请求
1.origin:通过http头中的origin判断域名是否是允许的;
2.Example-Same-origin:如果http rigin不存在,最好能够自己在请求头中加入该参数来标示是否是同源,true表示请求来自于同域名下(同域名下请求不带origin);如果该字段存在并且为true则允许请求接口,否则禁止;
3.Example_source_origin:该参数同origin,是在origin不存在的情况下用来标示请求来源的url;

返回

1.Access-Control-Allow-Origin: origin,origin表示允许哪些网站请求,不建议设置为*;
2.Access-Control-Expose-Headers:Example-Access-Control-Allow-Source-Origin,允许http返回中包含该字段,可以通过这种方式在返回头中加入自定义字段,如该例子中的Example-Access-Control-Allow-Source-Origin;
  • 优点
    前端方便不少,只需要发请求而不用考虑跨域问题;
    安全性能够得以控制和保障;
  • 缺点
    兼容性不全面,需要做降级处理;
  • 使用方式
    正常请求即可,无论是你要用xhr,还是用一些封装好的组件,如fetch,fetchJsonp,亦或是jquery一类的技术均可;
    后端在response时需要设置一定的配置参数,并保证安全策略,具体方案可以参照下面安全策略模块;

CORS与JSONP相比,无疑更为先进、方便和可靠。

1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。

    2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。

    3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS)。

3.document.domain

4.postMessage

5.window.name