前端中的跨域

同源策略？

同源策略/SOP（Same origin policy）是一种约定，属于浏览器的一个安全功能。不一样源的客户端脚本在没有明确受权的状况下，不能读写对方资源。因此a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

基于这个策略，有如下几种限制：

• cookie：js不能读取其它域下的cookie，不然你的登陆信息，安全信息就泄露了；
• Storage和IndexDB： 道理同cookie；
• DOM 和 JS 对象；
• AJAX请求：不能发送另外一个域下的Ajax请求；

什么是跨域

若是违反了同源策略，则就会产生跨域。哪些状况才算是跨域呢？

1. 页面域名不一样： http://a.com 和 http://b.com 不一样源
2. 父级域名相同，子域名不一样： http://a.c.com 和 http://b.c.com 不一样源
3. 端口不一样：http://a.com:8888 和 http://a.com:8000 不一样源
4. 协议不一样： http://a.com 和 https://a.com 不一样源

解决跨域的方式

jsonp跨域

jsonp跨域的原理很简单，借鉴了html中script脚本能够来自不一样域的原理。想想是否是script中的src属性值能够设置为来自第三方的js。
可是这也限制了jsonp只能作GET请求，同时须要后端作配合。

举例说明：

有一个跨域的请求： http://c.com/getInfo?id=xxx。由于同源策略的限制，咱们经过Ajax没法操做。那么使用jsonp，该如何绕过跨域的限制呢？直接看代码：

<script src="http://c.com/getInfo?id=xxx&cb=showInfo">;

这段代码中相对于咱们刚才列出接口多了个参数cb=showInfo。这个参数值表明数据请求成功后回调方法，这个方法用于处理接口返回的数据。而在服务端，在返回数据时，要作一些处理。具体方式就是返回如何格式的数据：

showInfo(data)。

data就是经过接口想要得到数据。

document.domain

若是两个源的父级域名一致，例如两个站点分别为http://a.c.com 和 http://b.c.com。 则能够经过设置window.domain = 'c.com'这样一来，他们的域也就相同了，能够互相操做。可是这种方式的缺点就是只适用于根域名一致的状况。也就是说，咱们不能够将http://a.c.com的 window.domain设置为 d.com 或者 e.com之类的。只能设置为它根域名下的某个域。

document.domain + iframe

虽然经过document.domain的方式，咱们只能在根域名一致的状况下进行跨域。可是若是配合iframe，则能够扩展咱们的能力范围。例如：想要使a.com页面不跳转也能获得b.com里的数据。在a.com页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取b.com的数据，而后a.com再去获得iframe获取到的数据。

cros跨域解决方案

CORS：一种跨域访问的机制，可让AJAX实现跨域访问；CORS容许一个域上的网络应用向另外一个域提交跨域AJAX请求。 服务器设置Access-Control-Allow-Origin HTTP响应头以后，浏览器将会容许跨域请求． 就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，仍是应该失败。

更多信息能够参考一种新的跨域解决方案

Web sockets来跨域

同源策略对websocket请求不适用。
其原理：在JS建立了web socket以后，会有一个HTTP请求发送到浏览器以发起链接。取得服务器响应后，创建的链接会使用HTTP升级从HTTP协议交换为web sockt协议。

nginx转发

经过代理设置，进行转发，同样能够达到跨域的目的。