同源策略
浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
本域指的是
- 同协议：如都是http或者https
- 同域名：如都是http://jirengu.com/a 和http://jirengu.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)
发送ajax请求的时候看接口的和浏览器地址栏是否相同
如果不同，如果出现了错误，这个时候的拦截是浏览器做出的行为，并不是服务器做出的行为
首先修改host文件
127.0.0.1 loclahost
比如文件夹下新建两个文件index.html server.js代码如下
html
<h1>hello world</h1>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET','http://localhost:8080/getWeather',true)
xhr.send()
xhr.onload = function(){
console.log(xhr.response)
}
</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 '/getWeather':
res.end(JSON.stringify({beijing: 'sunny'}))
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)
打开命令行开启server.js，在浏览器种输入localhost:8080/index.html
1.png
这个时候我们可以看到控制台打印了server.js返回的数据
现在我们修改浏览器地址，浏览器就变成了
2.png
这个时候就发现浏览器提示错误不允许跨域（浏览器的域名和我们的接口域名虽然是相等的，但是并不是一样的，所以不允许进行操作）
我们如何解决这个问题呢(如何进行跨域呢？)
如何进行跨域呢
cors方式
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。
我们仅仅修改一下server.js的代码，就可以请求可以跨域解决上面的错误了
添加代码
res.setHeader('Access-Control-Allow-Origin','127.0.0.1:8080')
这个时候我们的域名无论是Localhost还是127.0.0.1可以通过ajax获取到数据
当然我们也可以
res.setHeader('Access-Control-Allow-Origin','*')
这样我们无论哪个域名向这个接口发送请求都是可以获取到数据的
jsonp方式跨域
HTML 中 script 标签可以加载其他域下的js，比如我们经常引入一个其他域下线上cdn的jQuery。那如何利用这个特性实现从其他域下获取数据呢？这样的话其他域返回的数据我们是把他当成js来执行的，我们可以利用这一点进行跨域获取数据操作,我们再次新建两个文件index.html和server.js
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>
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)
从html代码我我们并没有发送ajax，但是我们使用script标签给http://127.0.0.1:8080/getNews这个路由发送了请求，并传递了数据callback=appendHtml
在server.js种我们判断如果请求有数据这个数据我们就返回数据+信息
但是这个数据加信息这一串字符串我们浏览器接受到了会把他当成js来执行，并不是一串真正的数据，这个时候我们提前定义一个函数，也就是刚才我们发送的数据名，在函数体里面提前写好函数操作，这样返回的数据直接作为参数传递进来使用这个函数，这样就做到了jsnop进行跨域
用降域的方式去跨域
- 在当前页面下的iframe的域名若与当前页面的域名不同源，则当前页面的js代码对iframe无法进行任何操作。
- 这是为了保护用户在iframe中登录其他网站或与之类似的相关操作会泄露隐私数据。
- 比如http://a.jrg.com和http://b.jrg.com,正常情况下，这两个域是不能交换数据的，但是如果通过 document.domain 将二者的域名都设置为
jrg.com.那么就可以实现跨域
注意事项：
顶级域名无法降域
不仅当前页面要使用document.domain，iframe的源页面也要使用document.domain
与JSONP、CORS相比，降域主要针对于当前页面下的iframe
举例如下：
// a.html
<body>
<!--
降域的前提是一级域名相同
-->
<div class="ct">
<h1>使用降域实现跨域</h1>
<div class="main">
<input type="text" placeholder='http://a.jrg.com:8080/a.html'>
</div>
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0"></iframe>
</div>
<script>
//URL: http://a.jrg.com:8080/a.html
document.querySelector('.main input').addEventListener('input',function(){
console.log(this.value);
window.frames[0].document.querySelector('input').value = this.value;
})
document.domain = 'jrg.com';
</script>
</body>
// b.html
<body>
<input type="text" id="input" placeholder="http://b.jrg.com:8080/b.html">
<script>
// URL: http:b.jrg.com:8080/b.html
document.querySelector('#input').addEventListener('input',function(){
window.parent.document.querySelector('input').value = this.value;
})
document.domain = 'jrg.com';
</script>
</body>
postMessage方式跨域
window.postMessage() 是HTML5的一个接口，专注实现不同窗口不同页面的跨域通讯。
postMessage(data,origin)方法接受两个参数
1.data:要传递的数据
2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写.
举例如下：
<div class="ct">
<h1>使用postMessage实现跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.jrg.com:8080/a.html">
</div>
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0"></iframe>
</div>
<script>
// URL: http://a.jrg.com/a.html
$('.main input').addEventListener('input',function(){
console.log(this.value);
window.frames[0].postMessage(this.value,'*');
})
window.addEventListener('message',function(e){
$('.main input').value = e.data;
console.log(e.data);
})
function $(id){
return document.querySelector(id);
}
</script>
<body>
<input id='input' type="text" placeholder="http://b.jrg.com/b.html">
<script>
//URL http://b.jrg.com:8080/b.html
$('#input').addEventListener('input',function(){
window.parent.postMessage(this.value,'*');
})
window.addEventListener('message',function(e){
$('#input').value = e.data;
console.log(e.data);
})
function $(id) {
return document.querySelector(id);
}
</script>
</body>
网友评论