JSONP
github
JOSNP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用
网页通过添加一个script标签，向服务器请求json数据，这样不受同源策略的限制，服务端返回一个包含数据的回调函数
btn.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;
}
首先，网页动态插入<script>标签，由它向跨源网址发请求，该请求有个callback参数，用来指定回调函数的名字，这对于JSON服务器收到这个请求，把数据放在回调函数参数的位置返回
script元素请求的脚本，直接作为代码运行，这时只要浏览器定义了appendHtml函数就立即会被调用，removeChild使页面变得干净，作为参数的json数据被视为JavaScript对象，而不是字符串，避免了使用JOSN.parse
服务器
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))
}
CORS
github
CORS全称是跨资源共享，是一种ajax跨域请求资源
支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样
res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')//给予请求来源页的url权限
//res.setHeader('Access-Control-Allow-Origin','*')表示匹配任意源网址
postMessage()和降域
image.png
