一、为甚么会再次出现布吕马难题
所致应用程序的相混思路管制。相混思路（Sameoriginpolicy）是一类签订合同，它是应用程序最核心理念也最基本上的安全可靠机能，假如缺乏了相混思路，则应用程序的恒定机能可能将单厢受到影响。可以说Web是构筑在相混思路此基础其内的，应用程序而已特别针对相混思路的一类同时实现。相混思路会制止三个域的javascriptJAVA和除此之外三个域的文本展开可视化。简而言之相混（即指在同三个域）是三个页面具备完全相同的协定（protocol），PS3（host）和freenode（port）
二、甚么是布吕马
当三个允诺url的协定、搜索引擎、路由器二者间任一三个与现阶段页面url完全相同即是布吕马
现阶段页面url被允诺页面url与否布吕马其原因
http://www.test.com/http://www.test.com/index.html否相混（协定、搜索引擎、freenode完全相同）
http://www.test.com/https://www.test.com/index.html布吕马协定完全相同（http/https）
http://www.test.com/http://www.baidu.com/布吕马主搜索引擎完全相同（test/baidu）
http://www.test.com/http://blog.test.com/布吕马子搜索引擎完全相同（www/blog）
http://www.test.com:8080/http://www.test.com:7001/布吕马freenode完全相同（8080/7001）
三、非相混管制
【1】难以加载非相混页面的 Cookie、LocalStorage 和 IndexedDB
【2】难以碰触非相混页面的 DOM
【3】难以向非相混地址推送 AJAX 允诺
四、布吕马化解方式
【1】设置document.domain化解难以加载非相混页面的 Cookie难题
因为应用程序是通过document.domain属性来检查三个页面与否相混，因此只要通过设置完全相同的document.domain，三个页面就能共享Cookie（此方案仅限主域完全相同，子域完全相同的布吕马应用场景。）
// 三个页面都设置
document.domain = test.com;
【2】跨文档通信 API：window.postMessage()
调用postMessage方式同时实现父窗口http://test1.com向子窗口http://test2.com发消息（子窗口同样能通过该方式推送消息给父窗口）
它可用于化解以下方面的难题：
页面和其打开的新窗口的数据传递
多窗口间消息传递
页面与嵌套的iframe消息传递
上面三个场景的布吕马数据传递
// 父窗口打开三个子窗口
var openWindow = window.open(http://test2.com, title);
// 父窗口向子窗口发消息(第三个参数代表推送的文本，第二个参数代表接收消息窗口的url)
openWindow.postMessage(Nice to meet you!, http://test2.com);
调用message事件，监听对方推送的消息
// 监听 message 消息
window.addEventListener(message, function (e) {
console.log(e.source); // e.source 推送消息的窗口
console.log(e.origin); // e.origin 消息发向的网址
console.log(e.data); // e.data 推送的消息
},false);
【3】JSONP
JSONP 是服务器与客户端跨源通信的常用方式。最大特点是简单适用，兼容性好（兼容低版本IE），缺点是只支持get允诺，不支持post允诺。
核心理念思想：页面通过添加三个<script>元素，向服务器允诺 JSON 数据，服务器收到允诺后，将数据放在三个指定名字的回调函数的参数位置传回来。
①原生同时实现：
<script src=”http://test.com/data.php?callback=dosomething”></script>
// 向服务器test.com发出允诺，该允诺的查询字符串有三个callback参数，用来指定回调函数的名字
// 处理服务器返回回调函数的数据
<script type=”text/javascript”>
function dosomething(res){
// 处理获得的数据
console.log(res.data)
}
</script>
② jQuery ajax：
$.ajax({
url: http://www.test.com:8080/login,
type: get,
dataType: jsonp, // 允诺方式为jsonp
jsonpCallback: “handleCallback”, // 自定义回调函数名
data: {}
});
③ Vue.js
this.$http.jsonp(http://www.domain2.com:8080/login, {
params: {},
jsonp: handleCallback
}).then((res) => {
console.log(res);
})
【4】CORS
CORS 是布吕马资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 允诺的根本化解方式。
1、普通布吕马允诺：只需服务器端设置
Access-Control-Allow-Origin2、带cookie布吕马允诺：前后端都需要展开设置
【前端设置】根据xhr.withCredentials字段判断与否带有cookie
①原生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);
}
};
② jQuery ajax
$.ajax({
url: http://www.test.com:8080/login,
type: get,
data: {},
xhrFields: {
withCredentials: true // 前端设置与否带cookie
},
crossDomain: true, // 会让允诺头中包含布吕马的额外信息，但不会含cookie
});
③vue-resource
Vue.http.options.credentials = true
④ axios
axios.defaults.withCredentials = true
【服务端设置】
服务器端对于CORS的支持，主要是通过设置
Access-Control-Allow-Origin来展开的。假如应用程序检测到相应的设置，就能允许Ajax展开布吕马的访问。① Java后台
/*
* 导入包：import
javax.servlet.http.HttpServletResponse;* 接口参数中定义：HttpServletResponse response
*/
// 允许布吕马访问的搜索引擎：若有路由器需写全（协定+搜索引擎+路由器），若没有路由器末尾不用加/
response.setHeader(“Access-Control-Allow-Origin”, “http://www.domain1.com”);
// 允许前端带认证cookie：启用此项后，上面的搜索引擎不能为*，必须指定具体的搜索引擎，否则应用程序会提示
response.setHeader(“Access-Control-Allow-Credentials”, “true”);
// 提示OPTIONS预检时，后端需要设置的三个常用自定义头
response.setHeader(“Access-Control-Allow-Headers”, “Content-Type,X-Requested-With”);
② 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反向代理能同时实现)，
问
*/
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…);
③ PHP后台
<?php
header(“Access-Control-Allow-Origin:*”);
④ Apache需要使用mod_headers模块来激活HTTP头的设置，它默认是激活的。你只需要在Apache配置文件的<Directory>, <Location>, <Files>或<VirtualHost>的配置里加入以下文本即可
Header set Access-Control-Allow-Origin
