同源策略(Same Origin Policy)
浏览器出于安全考虑，只允许本域下的接口交互。不同源的客户脚本在没有明确授权的情况下，不能读写对方的资源。
- 发送的请求和当前所在的页面是同一个域下的话，是可以接受的域名，这是浏览器的安全策略。
同源指的是什么？
- 同协议：http/https
- 同域名：http://baidu.com/a / http://baidu.com/b
- 同端口：80端口
如：
不同源的例子：
- http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
- http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
- http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)
需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域
修改host的作用
1.|127.0.0.1 a.com
2.|127.0.0.1 b.com
可以浏览器是a.com
端口号是b.com
这样虽然域名不相同，但代表的都是同一个意思
fs.readFile
fs.readFile(path.join(--dirname,pathObj.pathname),function(e,data){
if(e){
res.writeHead(404,'not found')
res.end('<h1>404 NOT Found<h1>')
}else{
res.end(data)
}
})
path.join(--dirname,path0bj.pathname)
当前文件夹加上pathname的路径。
三种情况
1.请求没有发出去，直接被浏览器拦截了
2.请求发出去了，服务器没有相应
3.请求发出去了，服务器也响应了，但浏览器收到数据之后发现数据不对，然后被拦截掉了
跨域请求，同源策略
是浏览器的安全策略，符合第三种情况
跨域机制
浏览器不会管你是不是接口，只会关注你是不是同源策略，你不是同源的话
- http://baidu.com
- http://jscode.com
- 只看当前的url和接口是否是同源，不管你的域名是否使用同一个服务器。
跨域的几种方法
1、JSONP
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好。主要利用html中script标签可以引入其他域的js文件，利用这个特性可以实现跨域访问接口，需要后端的支持。实现步骤：
1.定义数据处理函数fun：
2.网页通过添加一个<script>元素，src的地址执行后端接口最后加个参数callback=fun，向服务器请求JSON数据，这种做法不受同源政策限制；
3.服务器收到请求后，将数据放在fun回调函数里传回来,输出fun(data):
4.fun(data)会放到script标签作为js执行，此时会调用fun(data),将data作为参数。
可以先这样试试：
<script src="http://api.jirengu.com/weather.php"></script>
这时候会向天气接口发送请求获取数据，获取数据后做为 js 来执行。 但这里有个问题， 数据是 JSON 格式的数据，直接作为 JS 运行的话我如何去得到这个数据来操作呢？
这样试试：
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>
这个请求到达后端后，后端会去解析callback这个参数获取到字符串showData，在发送数据做如下处理：
之前后端返回数据： {"city": "hangzhou", "weather": "晴天"} 现在后端返回数据： showData({"city": "hangzhou", "weather": "晴天"}) 前端script标签在加载数据后会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行，这实际上就是调用showData这个函数，同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。 用户只需要在加载提前在页面定义好showData这个全局函数，在函数内部处理参数即可。
<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>
这就是 JSONP(JSON with padding)，总结一下：
JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。
server.js
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)
switch (pathObj.pathname) {
case '/getNews':
var news = [
"第11日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心"
]
res.setHeader('Content-Type','text/json; charset=utf-8')
if(pathObj.query.callback){
res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')')
}else{
res.end(JSON.stringify(news))
}
break;
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
if(e){
res.writeHead(404, 'not found')
res.end('<h1>404 Not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
index.html
<!DOCTYPE html>
<html>
<body>
<div class="container">
<ul class="news">
</ul>
<button class="show">show news</button>
</div>
<script>
$('.show').addEventListener('click', function(){
var script = document.createElement('script');
script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml';
document.head.appendChild(script);
document.head.removeChild(script);
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
console.log(html);
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
</script>
</html>
打开终端，输入 node server.js ，浏览器打开 http://localhost:8080/index.html
2.CORS
全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求。支持现代浏览器，IE10以上浏览器。CORS需要浏览器和服务器的支持，因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
当CORS请求满足下面的条件时
1.请求方法是以下三种方法之一：
HEAD
GET
POST
2.HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
基本思想是
1.当使用XMLHttpRequest()发送请求的时候，浏览器发现该请求不符合同源策略，会给该请求的头部信息添加一个origin字段，Origin字段用来说明，本次请求来自哪个源，服务器根据这个值，决定是否同意这次请求。
如果Origin指定的源，不被服务器允许，服务器也会返回正常的HTTP响应，浏览器发现响应头没有包含origin字段，就抛出错误，被onerror回调函数捕获，这种错误状态码无法识别。
2.如果指定的源，被服务器允许，服务器返回响应信息的响应头会包含origin的信息
server.js
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)
switch (pathObj.pathname) {
case '/getNews':
var news = [
"第11日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心"
]
res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')
//res.setHeader('Access-Control-Allow-Origin','*')
res.end(JSON.stringify(news))
break;
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
if(e){
res.writeHead(404, 'not found')
res.end('<h1>404 Not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
index.html
<!DOCTYPE html>
<html>
<body>
<div class="container">
<ul class="news">
</ul>
<button class="show">show news</button>
</div>
<script>
$('.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))
}
})
function appendHtml(news){
var html = ''
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>'
}
$('.news').innerHTML = html
}
function $(selector){
return document.querySelector(selector)
}
</script>
</html>
启动终端，执行 node server.js ，浏览器打开 http://localhost:8080/index.html ,查看效果和网络请求
3、降域（document.domain）
document.domain用于主域相同子域不同的场景
降域的设置也是有限制的，只能把document.domain，设置成自身或者更高一级的域，且主域必须相同，如：a.b.test.com中的某个文档的域可以设置成a.b.test.com、b.test.com、test.com。但是不可以设置成.com或者c.a.b.test.com或者baidu.com，因为baidu.com主域和当前域不同了。
4、postMessage
postMessage是html5新增的方法，可以实现跨文本档、多窗口、跨域消息传递。该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。postMessage(data,origin)方法接受两个参数：
1.data:要传递的数据。
2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑postMessage()方法只会将message传递给指定窗口，如果设置为"*"，这样可以传递给任意窗口。
