跨域

说到跨域，就要先谈谈它的背景。跨域是什么？跨域是怎么产生的呢？

1. 同源策略

首先先谈谈同源策略

1.1 同源的定义：

如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

下表给出了与 URL： http://store.company.com/dir/page.html 的源进行对比的示例:

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html	失败	主机不同

1.2 Internet Explorer 的同源策略

IE与普通的同源策略有两个主要的差异点：

（1）授信范围（Trust Zones）：两个相互之间高度互信的域名，如公司域名（corporate domains），则不受同源策略限制。

（2）端口：IE 未将端口号纳入到同源策略的检查中，因此 https://company.com:81/index.html 和 https://company.com/index.html 属于同源并且不受任何限制。

1.3 同源的两种情况

同源分为两种情况：

（1）dom的同源策略：禁止对不同页面的dom进行操作

（2）XMLHttpRequest同源：禁止使用XHR对象向不同源的ip发起http请求

1.4不受同源策略限制的

（1）页面中的链接，重定向以及表单提交是不会受到同源策略限制的。

（2）跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="…"></script>，<img>，<link>，<iframe>等。

1.5 同源策略出现

同源策略，它是由Netscape提出的一个著名的安全策略。
采用同源策略主要是因为安全。若非同源下的cookie等隐私数据可以被随意获取，非同源下的DOM可以的随意操作，ajax可以任意请求的话，用户的各种隐私势必泄露。
有了同源策略，就不能获取不同源的cookie，LocalStorage 和 indexDB，使网站的安全性大大提高。浏览器限制了跨域获取cookie，也限制了跨域DOM节点的访问，有效的防止的CRSF攻击。当然发起CRSF攻击还有其它手段。

2. 跨域的出现

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

例如：a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

跨域产生的原因自然就是同源策略了。

2.1 跨域导致的问题

竟然跨域会导致安全问题，那么为什么要解决跨域的问题？

举个例子：在真实的案例开发过程中，现在都流行前后端分离，在前后端分离的模式下，前后端的域名是不一致的。

Vue，Recat、angular这些框架支持前端，后端只会提供数据的接口，在请求的过程中我们要想回去数据一般都是post/get请求。

所以跨域的问题是需要解决的。

2.2 跨域的图解

在这里插入图片描述

跨域的一个案例

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><script>var xhr = new XMLHttpRequest();
xhr.open("get","http://127.0.0.1:8080/jsonp");
xhr.send();
xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){console.log(JSON.parse(xhr.responseText))}
}</script>
</body>
</html>

nodejs后台

'use strict';
//通过require将http库包含到程序中
var http = require('http');
//引入url模块解析url字符串
var url = require('url');
//引入querystring模块处理query字符串
var querystring = require('querystring');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){var urlPath = url.parse(req.url).pathname;var qs = querystring.parse(req.url.split('?')[1]);if(urlPath === '/jsonp' && qs.callback){res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});var data = {"name": "Monkey"};data = JSON.stringify(data);var callback = qs.callback+'('+data+');';res.end(callback);}else{res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});res.end('Hello World\n');    }    
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');

第一步：启动服务器
在这里插入图片描述

第二部：打开html网页
在这里插入图片描述

发现报错了，这里直接用Ajax请求服务器，由于端口不同，违反了同源策略，所以产生了跨域。

3. 跨域的解决方案

3.1 通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

3.1.1 什么是jsonp

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。

JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

3.1.2 jsonp代码实现

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><script>function test(data){alert(data.name);};var script = document.createElement("script");script.src = "http://127.0.0.1:8080/jsonp?callback=test";document.body.insertBefore(script, document.body.firstChild);</script></body>
</html>

nodejs后台：

'use strict';
//通过require将http库包含到程序中
var http = require('http');
//引入url模块解析url字符串
var url = require('url');
//引入querystring模块处理query字符串
var querystring = require('querystring');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){var urlPath = url.parse(req.url).pathname;var qs = querystring.parse(req.url.split('?')[1]);if(urlPath === '/jsonp' && qs.callback){res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});var data = {"name": "Monkey"};data = JSON.stringify(data);var callback = qs.callback+'('+data+');';res.end(callback);}else{res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});res.end('Hello World\n');    }    
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');

3.1.3 jsonp跨域的优缺点

JSONP只支持get请求，只发送一个请求，支持低版本的浏览器，不受同域策略的限制，兼容性好。

JSONP使用场景：一些低版本的浏览器，简单的请求。

3.2 document.domain + iframe跨域

3.2.1 document.domain是什么？

domain 属性可返回下载当前文档的服务器域名。

3.2.2 iframe是什么？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

可以利用iframe来实现跨域

3.2.3 document.domain + iframe跨域实现原理

此方案仅限主域相同，子域不同的跨域应用场景。

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

3.2.4 代码实现案例

父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>document.domain = 'domain.com';var user = 'admin';
</script>

子窗口：(http://child.domain.com/b.html)

<script>document.domain = 'domain.com';// 获取父窗口中变量alert('get js data from parent ---> ' + window.parent.user);
</script>

3.3 location.hash + iframe跨域

3.3.1 什么是location.hash

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

举个例子：
实例
返回一个 URL 的主要部分。假设当前的 URL 是 http://www.runoob.com/test.htm＃PART2：

document.write(location.hash);

以上实例输出结果：
#part2

location.hash + iframe跨域实现原理

实现原理： a欲与b跨域相互通信，通过中间页c来实现。三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

举个案例

a.html：(http://www.domain1.com/a.html)


<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>var iframe = document.getElementById('iframe');setTimeout(function() {iframe.src = iframe.src + '#user=admin';}, 1000); // 向b.html传hash值function onCallback(res) {alert('data from c.html ---> ' + res);}>// 开放给同域c.html的回调方法
</script>

b.html：(http://www.domain2.com/b.html)

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>var iframe = document.getElementById('iframe');// 监听a.html传来的hash值，再传给c.htmlwindow.onhashchange = function () {iframe.src = iframe.src + location.hash;};
</script>

c.html：(http://www.domain1.com/c.html)

<script>// 监听b.html传来的hash值window.onhashchange = function () {// 再通过操作同域a.html的js回调，将结果传回window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));};
</script>

3.4 window.name + iframe跨域

3.4.1什么是window.name

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

3.4.2 window.name传输原理

当在浏览器中打开一个页面，或者在页面中添加一个iframe时即会创建一个对应的window对象，当页面加载另一个新的页面时，window的name属性是不会变的。这样就可以利用在页面动态添加一个iframe然后src加载数据页面，在数据页面将需要的数据赋值给window.name。然而此时承载iframe的parent页面还是不能直接访问，不在同一域下iframe的name属性，这时只需要将iframe再加载一个与承载页面同域的空白页面，即可对window.name进行数据读取

3.4.2 案例与代码

index.html：(http://www.phpstudy.net/index.html)

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>A域（window.name+iframe跨域解决方案）</title>
</head>
<body></body>
<script type="text/javascript">var ifr = document.createElement("iframe");ifr.style.display="none";ifr.src = "http://www.c.com/index.html";document.getElementsByTagName("head")[0].appendChild(ifr);var flag = 0;ifr.onload = function(){if(flag == 0){flag = 1;ifr.contentWindow.location = 'http://www.phpstudy.net/proxy.html';}else{//获取数据console.log(JSON.parse(ifr.contentWindow.name))//释放内存，销毁iframeifr.contentWindow.close();document.getElementsByTagName("head")[0].removeChild(ifr);}}
</script>
</html>

proxy.html: (http://www.phpstudy.net/proxy.html）

  <p>该html为空</p>

index.html: （http://www.c.com/index.html）

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>window.name+iframe跨域解决方案）</title>
</head>
<body></body>
<script type="text/javascript">var person = {name:"蒋*",age:"26",education:"大学本科"}window.name = JSON.stringify(person)
</script>
</html>

以上便可以实现跨域，注意的是3个网址的端口都一样，只是前两个域名都为www.phpstudy.net，是同域的。而后一个的域名是www.c.com

结果：
在这里插入图片描述

3.5 postMessage跨域

3.5.1 什么是postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.）页面和其打开的新窗口的数据传递
b.）多窗口之间消息传递
c.）页面与嵌套的iframe消息传递
d.）上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin：协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

3.5.2 代码案例

a.html：(http://www.domain1.com/a.html)


<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       var iframe = document.getElementById('iframe');iframe.onload = function() {var data = {name: 'aym'};// 向domain2传送跨域数据iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');};// 接受domain2返回数据window.addEventListener('message', function(e) {alert('data from domain2 ---> ' + e.data);}, false);
</script>

b.html：(http://www.domain2.com/b.html)

<script>// 接收domain1的数据window.addEventListener('message', function(e) {alert('data from domain1 ---> ' + e.data);var data = JSON.parse(e.data);if (data) {data.number = 16;// 处理后再发回domain1window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');}}, false);
</script>

关于Cookie

Cookie是储存在用户本地终端上的数据

Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。

3.6 跨域资源共享（CORS）

3.6.1 CORS是什么？

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器，让Web应用被准许访问来自不同源服务器上的指定的资源

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

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

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

3.6.2 CORS的两种请求方式

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

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

3.6.3 简单请求的基本流程

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。

下面是一个例子，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段。

GET /cors HTTP/1.1Origin: http://api.bob.comHost: api.alice.comAccept-Language: en-USConnection: keep-aliveUser-Agent: Mozilla/5.0…

上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.comAccess-Control-Allow-Credentials: trueAccess-Control-Expose-Headers: FooBarContent-Type: text/html; charset=utf-8

上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头。

（1）Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

（2）Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

（3）Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader(‘FooBar’)可以返回FooBar字段的值。

3.6.4 withCredentials 属性

上面说到，CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。

Access-Control-Allow-Credentials: true
另一方面，开发者必须在AJAX请求中打开withCredentials属性。

var xhr = new XMLHttpRequest();xhr.withCredentials = true;
否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

但是，如果省略withCredentials设置，有的浏览器还是会一起发送Cookie。这时，可以显式关闭withCredentials。

xhr.withCredentials = false;
需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

3.6.5 非简单请求

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

除了Origin字段，"预检"请求的头信息包括两个特殊字段。

（1）Access-Control-Request-Method

该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

（2）Access-Control-Request-Headers

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

这里不再多说，有兴趣请看：详细请看：
http://www.ruanyifeng.com/blog/2016/04/cors.html
或者：
https://www.cnblogs.com/knowledgesea/p/6808411.html

3.6.6 简单请求的代码分析

前端原生ajax:

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookie
xhr.withCredentials = true;xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}
};

Nodejs后台：

var http = require('http');
var server = http.createServer();
var qs = require('querystring');server.on('request', function(req, res) {var postData = '';// 数据块接收中req.addListener('data', function(chunk) {postData += chunk;});// 数据接收完毕req.addListener('end', function() {postData = qs.parse(postData);// 跨域后台设置res.writeHead(200, {'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）/* * 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，* 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问*/'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie});res.write(JSON.stringify(postData));res.end();});
});server.listen('8080');
console.log('Server is running at port 8080...');

3.7 NGINX代理跨域

3.7.1原理

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

实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

3.7.2代码案例

nginx具体配置：

#proxy服务器
server {listen       81;server_name  www.domain1.com;location / {proxy_pass   http://www.domain2.com:8080;  #反向代理proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名index  index.html index.htm;# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*add_header Access-Control-Allow-Credentials true;}
}

前端ajax代码


var xhr = new XMLHttpRequest();// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();