同源策略是浏览器决定是否接收跨域的内容。
浏览器出于安全方面的考虑,只允许在本域的接口下交互,不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。
本域是指:同协议:hhtp 或https 同域名,同端口(80是http默认端口,即没有写端口就是80)
在浏览器中,当我们在地址栏输入域名回车后,浏览器会向DNS服务器发起域名解析请求,DNS服务器将域名解析成对应的公网IP后,将结果返回给浏览器,浏览器再通过这个IP访问网站 对域名与ip的不同访问是跨域
对ip的访问和对域名的访问属于跨域访问
这是服务器的代码
var http=require('http')
var path=require('path')//文件路径
var fs=require('fs')
var url=require('url')
function staticRoot(staticPath,req,res){
var pathobj=url.parse(req.url,true);
console.log(staticPath)
var filepath=path.join(staticPath,pathobj.pathname);
fs.readFile(filepath,'binary',function(err,fileContent){
if(err){
res.writeHead(404,'not found')
res.end('<h1>404 Not Found</h1>')
}else{
res.writeHead(200,'ok')
res.write(fileContent,'binary')
res.end()
}
})
}
var server=http.createServer(function(req,res){
switch(req.url)
{
case '/getWeather':
console.log('getWeather')
res.end(JSON.stringify({a:1,b:2}))
default:
staticRoot(__dirname,req,res);//最终得到static的绝对路径
}
})127.0.01
server.listen(8080)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Hello World</h1>
<script type="text/javascript">
var xhr=new XMLHttpRequest(); //这是客户端的请求,如果这里localhost改成 127.0.0.1的话,同源策略会进行拦截
xhr.open('GET','http://localhost:8080/getWeather',true)
xhr.send()
xhr.onload=function(){
console.log(xhr.responseText);
}
</script>
</body>
</html>
跨域指绕过同源策略获取数据
Ajax 需要关心同源策略,但是script标签并不需要
JSONP实现方式:
<script> 标签可以引用不同域下的JS。即浏览器会像script标签上的地址发送请求,同时将返回的数据作为Javascript来执行。
客户端:
<script type="text/javascript">
showData=function(data){
var c=JSON.stringify(data);
console.log(c)
}
</script>
<script type="text/javascript" src="http://127.0.0.1:8080/getWeather?callback=showData">
</script>
服务器:
var pathobj=url.parse(req.url,true)
switch(pathobj.pathname)
{
case '/getWeather':
if(pathobj.query.callback){
console.log('YES')
res.end(pathobj.query.callback+'('+JSON.stringify({a:1,b:2})+')' )
}else{
res.end(JSON.stringify({a:1,b:2}))
}
break;
default:
staticRoot(__dirname,req,res);//最终得到static的绝对路径
}
cors:当浏览器检测到该请求不符合同源策略时,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求,则会在返回结果中加一个响应头Access-Control-Allow-Origin.浏览器比较Access-Control-Allow-Origin 与请求的Origin是否一样
res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:8080');
降域:
document.domain='jirengu.com'