跨域简单介绍 | 易学教程

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

来源：oschina

链接：https://my.oschina.net/u/4381733/blog/4055157

标签

jsonp

opera

XHR

jquery

javascript