关于跨域

why?

为何会有跨域？

我们得先了解下 ==同源战略（SOP, Same Origin Policy)==。

浏览器出于平安方面的斟酌，只能接见与包括它的页面位于统一个域中的资本，该战略为通讯设置了“雷同的协定、雷同的域、雷同的端口”这一限定。试图接见上述限定以外的资本，都邑激发平安毛病。这类平安战略能够防备某些歹意行动。

简而言之，

1. 同协定 Same Protocol
2. 同域名 Same Hostname
3. 同端口号 Same Port

Same Protocol && Same Hostname && Same Port

What?

什么是跨域？

==跨域就是采纳手艺计划打破同源战略的限定，完成差别域之间交互（请求相应）。==

How?

那末怎样完成跨域呢?
有以下几种要领。

==要领一==

CORS (Cross-Origin Resource Sharing，跨域源资本共享),是一种ajax跨域请求资本的体式格局，支撑当代浏览器，IE支撑10以上，经由历程XMLHttpRequest完成Ajax通讯的一个重要限定就是同源战略。
CORS是W3C的一个事情草案，定义了在必需接见跨境资本时，浏览器和服务器该怎样沟通。CORS的基础思想，就时运用自定义的HTTP头部让浏览器和服务器举行沟通，从而决议请求或许相应应当胜利照样失利。
完成思绪：运用XMLHttpRequest发送请求时，浏览器会给该请求自动增加一个请求头：Origin。服务器经由一系列处置惩罚，假如肯定请求泉源页面属于白名单，则在相应头部到场首部字段：Access-Control-Allow-Origin。浏览器比较请求头部的Origin 和相应头部的 Access-Control-Allow-Origin是不是一致，一致的话，浏览器获得相应数据。假如服务器没有设置Access-Control-Allow-Origin 或许这个头部源信息不婚配，浏览器就会驳回请求。

模仿CORS的完成

步骤1.

怎样假装一个网站（在当地）？

1.编辑hosts文件

苹果mac: 直接在git bash上输入命令行操纵即可 “sudo vi /etc.hosts” ，或许下载一些图形界面运用软件直接修正。

Windows操纵体系:

1. win键（四个方块的键）+ R = 弹开运转窗口
2. 复制该文件途径 c:windowssystem32driversetc
3. 选中hosts文件，右键-属性-平安-挑选组或用户名（增加修正保留的权限的对象）- 编辑 &＃8211; 再次挑选组或用户名（增加修正保留的权限的对象 &＃8211; 勾选权限（选项在此不表）
4. 翻开hosts文件，写入 127.0.0.1 localhost；127.0.0.1 bai.com；127.0.0.1 google.com；能够写入你任何你想模仿的网站，根据这类对应关联花样即可， ip地点+域名。

步骤2.
所需东西
node.js && git bash（模仿服务器)，一个简朴的html页面内里有个跨域请求的Ajax通讯。

hello world

//nodeJS模仿后端相应CORS的完成
var http = require('http');
var fs = require('fs');
var url = require('url');
var path = require('path');
http.createServer(function(req, res){
var urlObj = url.parse(req.url, true)
switch (urlObj.pathname){
case '/getNews':
var news = ['NBA Break News','CBA Break News']
//CORS的完成
res.setHeader('Access-Control-Allow-Origin','http://google.com:8080')
/*res.setHeader('Access-Control-Allow-Origin','*')
服务器设置公用接口
*/
res.end(JSON.stringify(news));
break;
case '/' :
if(urlObj.pathname == '/') {
urlObj.pathname += 'index.html'
}
default:
var filePath = path.join(__dirname, urlObj.pathname);
fs.readFile(filePath,'binary', function(error, fileContent){
if(error){
console.log('404')
res.writeHeader(404, 'not found')
res.end('

404,not found

上面代码就是CORS完成的历程。

1. 在当地修正hosts文件，127.0.0.1 google.com， 页面的url为 http://google.com:8080。
2. 在title为google的页面上增加一个ajax请求,该请求以get要领会向baiduServer的端口（&＃8217;http://baidu.com:8080/getNews&＃8217;）发送一个请求。
3. 浏览器会给请求头加上Origin: http://google.com:8080, Request URL: http://baidu.com:8080/getNews。
4. baiduServer后端，相应头增加首部字段。Access-Control-Allow-Origin: http://google.com:8080。 表明该服务器（baiduServer）接收请求并赋予相应。
5. 浏览器比较请求头部的Origin 和相应头部的 Access-Control-Allow-Origin是不是一致，一致的话，浏览器获得相应数据。假如服务器没有设置Access-Control-Allow-Origin: http://google.com:8080 或许这个头部源信息不婚配，浏览器就会驳回请求。

固然服务器也能够设置公用接口， res.setHeader(&＃8216;Access-Control-Allow-Origin&＃8217;,&＃8217;*&＃8217;)

服务器设置公用接口， 任何人都能够运用该服务器这个端口的数据。


==要领二==

JSONP，是JSON with padding的简写（添补式JSON或参数式JSON）。

JSONP的道理，经由历程动态

如许在两个页面中同时增加document.domain， 就能够完成父页面操控子页面（框架）。

控制台
window.frames[0].document.body
//console输出

this is http://b.shawroc.com:8080/b.html

代码

this is http://b.shawroc.com:8080/b.html

==要领四==

html5的postMessage API

html5引入的postMessage()要领，许可来自差别源的剧本采纳异步体式格局举行有限的通讯，能够完成跨文本档、多窗口、跨域音讯通报。

postMessage(data, origin) 要领，接收两个参数。

1.data:要通报的数据，html5范例中提到该参数能够是Javascript的恣意基础范例或可复制的对象，但是并非一切浏览器都做到了这点儿，部份浏览器只能处置惩罚字符串参数，所以我们在通报参数的时刻须要运用JSON.stringify()要领对对象参数序列化，在低版本IE中援用json2.js能够完成相似结果。

2.origin：字符串参数，指明目的窗口的源，协定+主机+端口号[+URL]，URL会被疏忽，所以能够不写，这个参数是为了平安斟酌，postMessage()要领只会将message通报给指定窗口，固然假如情愿也能够建参数设置为&＃8221;*&＃8221;，如许能够通报给恣意窗口，假如要指定和当前窗口同源的话设置为&＃8221;/&＃8221;。

范例

模仿postMessage的事情机制

改写hosts文件

127.0.0.1 a.com

127.0.0.1 b.com

this is http://b.com:8080/b.html

//nodeJS 模仿后端
var http = require('http');
var fs = require('fs');
var path = require('path');
var url = require('url');
http.createServer(function(req,res){
var urlObj = url.parse(req.url, true);
switch(urlObj.pathname) {
case '/getNews' :
var news = ['NBA Break News','CBA Break News'];
res.setHeader('Content-Type','text/Javascript; charset=utf-8');
if(urlObj.query.newsData){
var data = urlObj.query.newsData + '(' + JSON.stringify(news) + ')' ;
res.end(data);
} else {
res.end(JSON.stringify(news))
}
break;
case '/' :
if(urlObj.pathname == '/') {
urlObj.pathname += 'index.html'
}
default:
var filePath = path.join(__dirname, 'postMessage' ,urlObj.pathname);
fs.readFile(filePath, function(error, data) {
if(error) {
res.writeHeader(404, 'not found');
res.end('

404, Not Found

剖析代码
步骤1， a.com:8080/a.html页面下的input发作输入事宜时， 向目的窗口发一个MessageEvent事宜, MessageEvent.data能够获得this.value的值。接下来切换到b.html页面。

步骤2， 在b.com:8080/b.html监听message事宜，在这，就能够完成 a.com:8080/a. html的input标签输入什么，嵌入在 a.com:8080/a. html的iframe框架（b.com:8080/b.html）同步父页面（a.com:8080/a. html）的输入内容了。

步骤3，b.com:8080/b.html的input发作输入事宜时，向嵌套页面的父页面window.parent（a.com:8080 ）postMessage，然后切回到a.html。

步骤4， 监听嵌套页面b.com:8080/b.html的messageEvent事宜，把b.com:8080/b.html的input.value（message.data)赋值给a.com:8080的input.value， 完成输入内容的双向同步。