推送的 ajax 允诺时的 url 和现阶段网页的 url 不完全一致，就出现了布吕马。
相混思路
应用程序处在安全可靠各方面的考量，只容许与本域下的USB机可视化，不相混的应用程序JAVA在没明晰许可的情况下，无法随机存取旁人的资源
本域
同协定：都是 http 或是 https同搜索引擎：比如都是 https://www.baidu.com 和 https://www.baidu.com/a 通路由器：都是 80 路由器特别注意，对现阶段网页而言，网页放置的 JS 文档的域（script 中的 src）不关键，关键的是读取该 JS 网页所处的甚么域
布吕马的三种与此同时实现
JSONP
HTML 中 script 条码能读取其它域下的 JS, 比如说他们能
具体而言
<script src=https://easy-mock.com/mock/5cf5e5019709594c924df979/example/weather></script>
话我怎样去获得那个统计数据来操作方式呢
标准答案是：事先表述好的表达式。
<script src=https://easy-mock.com/mock/5cf5e5019709594c924df979/example/weather/city?callback=showData></script>
以后后端回到统计数据： {“city”: “上海”, “weather”: “天晴”} 那时后端回到统计数据： showData({“city”: “上海”, “weather”: “天晴”}) 后端script条码在读取统计数据前会把 「showData({“city”: “上海”, “weather”: “天晴”})」作为 js 来继续执行，这事实上是初始化showData那个表达式，与此同时模块是 {“city”: “上海”, “weather”: “天晴”}。 用户只需要在读取提前在网页表述好showData那个全局表达式，在表达式内部处理模块即可。
<script>
function showData(ret) {
console.log(ret)
}
</script>
<script src=”https://easy-mock.com/mock/5cf5e5019709594c924df979/example/weather/city?callback=showData”></script>
以上是 JSONP （JSON with padding）
据上 ‘包裹’ 那个表达式名，推送给后端，换句话说，JSONP 需要对应USB的后端配合才能与此同时实现。
以下是代码示范
<body>
<div class=”container”>
<ul class=”news”>
</ul>
<button class=”show”>show news</button>
</div>
<script>
function $(id) {
return document.querySelector(id)
}
//利用 script 推送允诺
$(.show).addEventListener(click, function () {
var script = document.createElement(script)
script.src = http://127.0.0.1:8080/getNews?callback=appendHtml // 参数带上 appendHtml 表达式
document.head.appendChild(script)
document.head.removeChild(script) //只是利用 script 来推送允诺，实际不应该存在，所以需要移除
})
//表述 appendHtml 表达式，处理回到后的统计数据
function appendHtml(news) {
var html =
for (var i = 0; i < news.length; i++) {
html += <li> + news[i] + </li>
}
console.log(html)
$(.news).innerHTML = html
}
</script>
</body>
//server.js
var http = require(http)
var fs = require(fs)
var path = require(path)
var url = require(url)
//创建 server
http.createServer(function(req,res){
var pathObj = url.parse(req.url,true) //解析允诺中的 url 回到一个对象
switch (pathObj.pathname) {
case /getNews:
var news = [
“第11日前瞻：中国冲击4金 博尔特再战200米羽球”,
“正直播柴飚/洪炜出战 男双力争会师决赛”,
“女排将死磕巴西！郎平安排男陪练模仿旁人核心”
]
res.setHeader(Content-Type,text/json;charset=utf-8) //设置响应头的统计数据解析方式
console.log(pathObj.query.callback)
if(pathObj.query.callback) { //如果有 callback(appendHtml), 回到的是 callback(统计数据)
res.end(pathObj.query.callback + (+ JSON.stringify(news) + ))
}else {
res.end(JSON.stringify(news))
}
break;
default://path.join 生成绝对路径，fs.readFile 读取文档内容
fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){ //回调表达式，e 是 err , data 是文档的内容
if(e){
res.writeHead(404,not found)
res.end(<h1>404 Not Found</h1>)
}else {
res.end(data)
}
})
}
}).listen(8080)
打开终端，输入 node server.js，http-server, 打开 localhost:8080，即可布吕马允诺到统计数据
CORS
CORS 全称是布吕马天然资源共享（Cross-Origin Resource Sharing），当你使用 XMLHttpRequest 推送允诺时，应用程序发现该允诺不符合相混思路，会给该允诺加上一个允诺头：Origin,后台进行一系列处理，如果确定接受允诺则在回到结果中加入一个响应头: Access-Control-Allow-Origin; 应用程序判断该响应头中是否包含 Origin 的值，如果有，应用程序则会处理响应，他们就能拿到响应统计数据，如果不包含，应用程序直接驳回，此时无法拿到统计数据，所以 CORS 的表象 是让你觉得它与相混的 ajax 允诺没啥区别，代码完全一样。
继续改写上面的例子
<body>
<div class=”container”>
<ul class=”news”>
</ul>
<button class=”show”>show news</button>
</div>
<script>
function $(selector) {
return document.querySelector(selector)
}
//推送 ajax 允诺
$(.show).addEventListener(click, function () {
var xhr = new XMLHttpRequest()
xhr.open(GET,http://127.0.0.1:8080/getNews, true)
xhr.send()
xhr.onload = function() {
appendHtml(JSON.parse(xhr.responseText))
}
})
//表述 appendHtml 表达式，处理回到后的统计数据
function appendHtml(news) {
var html =
for (var i = 0; i < news.length; i++) {
html += <li> + news[i] + </li>
}
$(.news).innerHTML = html
}
</script>
</body>
//server.js
var http = require(http)
var fs = require(fs)
var path = require(path)
var url = require(url)
//创建 server
http.createServer(function(req,res){
var pathObj = url.parse(req.url,true) //解析允诺中的 url 回到一个对象
switch (pathObj.pathname) {
case /getNews:
var news = [
“第11日前瞻：中国冲击4金 博尔特再战200米羽球”,
“正直播柴飚/洪炜出战 男双力争会师决赛”,
“女排将死磕巴西！郎平安排男陪练模仿旁人核心”
]
res.setHeader(Access-Control-Allow-Origin,http://localhost:8080)
res.setHeader(Content-Type,text/json;charset=utf-8)
res.end(JSON.stringify(news))
break;
default://path.join 生成绝对路径，fs.readFile 读取文档内容
fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){ //回调表达式，e 是 err , data 是文档的内容
if(e){
res.writeHead(404,not found)
res.end(<h1>404 Not Found</h1>)
}else {
res.end(data)
}
})
}
}).listen(8080)
允诺头中设置为 Sec-Fetch-Mode: cors 模式，响应头中 Access-Control-Allow-Origin: http://localhost:8080，回到的统计数据，应用程序能拿到。
