同源策略
浏览器出于安全考虑，只允许本域下接口交互，不同源的客户端脚本在没有明确授权下，不能读写对方的资源。
- 同协议，如http或者https
- 同域名，如都是google.com/index.html,google.com/another
- 同端口,80端口
同源例子：
google.com/ai，google.com/bigdata
不同源例子：
- http://google.com/main.js-https://google.com/another.php（协议不同）
- https://google.com/main.js-https://facebook.com/another.php（域名不同）
- https://google.com/main.js-https://google.com:80/another.php（端口不同）
跨域方法
JSONP
以 script 标签加载数据的方式绕过同源策略，后端返回数据时拼接函数，将返回数据作为拼接函数的参数，数据返回后执行该函数。
<script>
showData(string) {
console.log(JSON.parse(string));
}
</script>
<script
src="http://google.com/ai.js?callback = showData">
</script>
CORS
CORS,cross-origin resourse sharing，支持现在浏览器，IE10以上。
在后端加上这句话：
// allow all request of cross origin
res.setHeader('Access-Control-Allow-Origin','*');
// allow only the request of 'example.com:8080'
res.setHeader('Access-Control-Allow-Origin','example.com:8080');
postMessage
iframe 域名和当前域名跨域。
$('.main input').addEventListener('input', function() {
windows.parent.postMessage(this.value, '*');
})
window.addEventListener('message', function(e) {
$('#input').value = e.data;
console.log(e.data);
})
实践检验
在本地写一个html，地址是 http://localhost/index.html，
，放置一个 button，点击后向http://127.0.0.1:80请求，此时两个文件不同域名，因此处于跨域，运用 CORS,cross-origin resourse sharing 方法，通过服务器端设置一个跨域允许，从而将服务器端数据返回到不同源请求。
html 客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>show something</button>
<script>
function $(selector) {
return document.querySelector(selector);
}
$('button').onclick = function() {
console.log('clicked');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:80/getst',true);
xhr.send();
xhr.onload = function(){
var resP = document.createElement('p');
resP.innerHTML = JSON.parse(xhr.responseText)
$('body').appendChild(resP);
// console.log(JSON.parse(xhr.responseText));
}
}
</script>
</body>
</html>
server 端
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 '/getst':
var something = "This is a cross origin response via a request";
res.setHeader('Access-Control-Allow-Origin', 'http://localhost');
res.end(JSON.stringify(something));
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(80);
请求成功示意
可以看到，请求的客户端域名是：localhost/index.html，而请求的地址是：http://127.0.0.1:80，两者是跨域的，而在服务器端设置
res.setHeader('Access-Control-Allow-Origin', 'http://localhost');
就是允许http://localhost进行跨域请求，因此请求成功。如果将这行去掉，这回造成非同源拦截：
非同源拦截
网友评论