同源策略：浏览器出于安全方面的考虑，只允许与本域下的接口交互，不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
定义
是指浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对js实施的安全限制。
本域指的是：
同协议：如都是http或https
同域名：如都是http://jirengu.com/a和http://jirengu.com/b
同端口：如都是80端口
跨域就是访问的localhost:8080，那么请求的xhr.open('localhost:8080')必须是一样。是浏览器的安全机制，请求也发出去了，服务器也给响应了，但是浏览器不收。如果必须跨域请求资源怎么办呢？
- Jsonp:
由于server1.example.com的网页无法与不是server1.example.com的服务器沟通，ajax实现不了输入的网址与接口的域名不一致的请求的发送。如何实现跨域呢？（即在a网址下请求b服务器数据呢？）
<script>标签的src属性可以实现即：
<script typt='text/javascript' src='http://169.254.200.238:8080/jsonp.do'>
可以看到在端口号80下请求成功了，但是浏览器抛出了异常，那是因为我们请求的数据会立马被浏览器当做js语句去执行，但是请求到的数据并不符合其语法规范，如何解决这一问题呢？
<script src='http://api.jirengu.com/weather.php?callback=showdata'></script>
这个请求到达后端后，后端会解析callback这个参数获取到字符串showdata,在发送数据做如下处理：
之前后端返回数据{"city":"hangzhou","weather":"晴天",}现在后端返回数据：showdata({"city":"hangzhou","weather":"晴天",}),实际上就是调用showdata这个函数，用户只需在加载提前在页面定义好showdata这个全局函数。
所以jsonp是通过script标签加载数据的方式去获取数据，当做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'/get News':
var news={
'前瞻：中国。。。'，
“女排将死磕巴西：。。。”
}
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(path.join(_dirname,pathObj.pathname),function(e.data){
if(e){
res.writeHead(404,'notfound')
res.end('<h1>404 not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
在index.html中
<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>'
}
$('.news').innterHtml=html;
}
})
</script>
- cors
跨域资源共享。
前端就是正常的ajax请求，后端只需在
case 'getNews',
var news=[...]
res.setHeader('Access-control-Allow-origin','http://localhost:8080')(最重要的一句)
res.end(JSON.stringify(news))
如果ajax发送的请求的域名和输入框的不一致，则浏览器发送请求的时候就会加上orign:http:127.0.0.1....如果服务器响应了并且加上了Access-control-Allow-origin:域名/,如果orign的域名和域名/一致，则浏览器就会允许。
如果接口是公用的。可以在后端浏览器这样写：('Access-control-Allow-origin','*') - iframe
iframe:输入框输入的域名和iframe内的域名必须一致，否则，iframe内的网页只能展现在页面上，不能操作其js。
降域：条件是a.jrg.com和b.jrg.com中的jrg.com必须在同一域名下才可降域。
<body>
<input id='input' type='text' placeholder='http://b.jrg.com:8080/b.html'>
<script>
document.querySelector('#input').addEventListener('input',function(){
window.parent.document.querySelector('input').value=this.value;
})
document.domain='jrg.com'//降域
postMessage:有两个域名不一样。但如果iframe可以供其他人用就可以实现跨域。
a.html
<div class='main'>
<input type='text' placeholder='http://a.jrg.com:8080/a.html'>
</div>
<iframe src='http://localhost:8080/b.html'></iframe>
<script>
$('.main input').addEventListener('input',function(){
window.frames[0].postMessage(this.value,'*');//window.frames[0]表示第一个iframe
})
window.addEventListener('message',function(e){
$('.main input').value=e.data
})
b.html:
<body>
<input id='input' type='text' placeholder='http://b.jrg/com:8080/b.html'>
<script>
$('#input').addEventListener('input',function(){
window.parent.postMessage(this.value,'*')
})
window.addEventListener('message',function(e){
$('#input').value=e.data
})
网友评论