跨域问题

跨域问题：先了解几个概念

同源：如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略：限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

所以，出现跨域问题的原因是因为浏览器的同源策略导致的；浏览器的锅。

那么，为什么会有同源策略，没有会产生什么影响：

1. CSRF  中文名称：跨站请求伪造

你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账......造成的问题包括：个人隐私泄露以及财产安全。

       CSRF原理： Cookie是由HTTP服务器设置的，保存在浏览器中，在用户访问其他页面时，会在HTTP请求中附上该服务器之前设置的Cookie。

    2. 如果没有同源策略，钓鱼网站会拿到别的网站的DOM，从而拿到你输入的账号密码；比如：你要访问的是www.zhifubao.com进行登录,结果点进了一个www.zifubao.com的网站。。。

所以，同源策略的作用就是规避这些风险的，但是有了同源策略，又会出现跨域的问题，那么，跨域的问题怎么解决呢？

1. Jsonp跨域

jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。一个是描述信息的格式，一个是信息传递双方约定的方法。

Jsonp的产生：

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>

4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

5.而json又是一个轻量级的数据格式,还被js原生支持

6.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，

①基于script标签实现跨域：

举个例子:我在http://study.cn/json/jsonp/jsonp_2.html下请求一个远程的js文件

<script type="text/javascript" src="http://web.cn/js/message.js"></script>

②基于script标签实现跨域

例如：在http://study.cn/json/jsonp/jsonp_3.html页面请求

http://192.168.31.137/train/test/jsonpthree；通过callback回调函数

③jsonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求

2.document.domain + iframe跨域

有限制，必须要有相同的基域，如：http://www.a.itcast.com/index.html和

http://www.b.itcast.com/login.html，就有相同的基域itcast.com

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

1.a窗口：（http://www.a.itcast.com/index.html）

<iframe id="iframe" src="http:// www.a.itcast.com/index.html "></iframe>

<script>

    document.domain = ' itcast.com ';

    var user = 'admin';

</script>

2.b窗口：（http://www.b.itcast.com/login.html）

<script>

    document.domain = ' itcast.com ';

    // 获取父窗口中变量

    alert('get js data from parent ---> ' + window.parent.user);

</script>

3. window.name + iframe跨域

       用的比较少，比较麻烦，不总结了，知道可以跨域就行

4. postMessage跨域

       postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

a.） 页面和其打开的新窗口的数据传递

b.） 多窗口之间消息传递

c.） 页面与嵌套的iframe消息传递

d.） 上面三个场景的跨域数据传递

5. 跨域资源共享（CORS）

       用的比较多，目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS），CORS也已经成为主流的跨域解决方案。

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置；

若要带cookie请求：前后端都需要设置

前端：xhr.withCredentials = true;

后台：

6. nginx代理跨域

       原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不涉及到浏览器，不需要同源策略，也就不存在跨越问题。

 

参考文档：https://segmentfault.com/a/1190000011145364