背景:
同源策略:NetSpace公司引入,基于浏览器安全,防止浏览器收到XSS、CSFR等攻击。同源,即协议+域名+端口完全一致。
同源策略限制的行为:
Cookie、LocalStorage和IndexDB无法读取
DOM和JS对象无法获取
Ajax请求不能发送
解决方案:
方案一:JSONP
原理:通过script标签引入的js不受同源策略的限制,而XmlHttpRequest对象受到同源策略的影响。可以加载跨域服务器上的脚本,用JSONP获取的不是JSON数据,而是可以直接运行的JS脚本。
eg1:jquery
function jsonpCallback(data) {
console.log("jsonpCallback: " + data.name)
}
$.ajax({
url:"http://www.nanhuaqiushui.com:8080/login",
type:"get",
dataType:"jsonp",
data:{
name: $("#name").val(),
id: $("#id").val()
},
cache: false,
timeout: 5000,
jsonp: "callback", //jsonp字段含义为服务器通过什么字段获取回调函数的名称
jsonpCallback:"jsonpCallback", //自定义回调函数名
success:function(data){
console.log("ajax success callback: " + data.name);
},
error: function(jqXHR, textStatus, errorThrown){
console.log(textStatus + ' ' + errorThrown);
}
})
eg2:vue
this.$http.jsonp("http://www.nanhuaqiushui.com:8080/login",{
params:{
name: $("#name").val(),
id: $("#id").val()
},
jsonp: "jsonpCallback"
}).then((res) => {
console.log(res);
});
服务器端处理:
app.get("/login", function(req,res){
console.log("server accept: " + req.query.name, req.query.id);
var data = "{" + "name:" + req.query.name + "- server 3001 process" + "," + "id:" + req.query.id + "- server 3001 process" + "}";
var callback = req.query.callback;
var jsonp = callback + "(" + data + ")";
console.log(jsonp);
res.send(jsonp);
res.end();
});
注意:data中字符串拼接,不能直接将JSON格式的data直接传给回调函数,否则会发生编译错误。
本质:
不足:
1.只能使用GET请求(即时POST也会被转换成GET请求)。
2.JSONP本质上是通过script标签的src属性实现跨域请求的,而非ajax,因此不是通过XMLHttpRequest进行传输的,所以无法注册success、error等事件监听函数。
方案二:CORS(跨资源共享)实现跨域调用
原理:使用自定义的HTTP头部让浏览器与服务器沟通,从而决定请求或响应是否成功。
Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了Web服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略。(现代浏览器都支持CORS)
优点:采用XMLHttpRequest对象传递,同时支持GET/POST等多种请求方式,方便调试。是JSONP模式的现代版。
eg:
app.post(‘/cors‘,function(req,res){
res.header("Access-Control-Allow-Origin","*"); //设置请求来源不受限制
res.header("Access-Control-Allow-Headers","X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("Content-Type", "application/json;charset=utf-8");
var data = {
name: req.body.name + ‘ - server 3001 cors process‘,
id: req.body.id + ‘ - server 3001 cors process‘
};
res.send(data);
res.end();
})
优点:只需服务端设置Access-Control-Allow-Origin即可,前端无需设置。
withCredentials: true // 前端设置是否带cookie
方案三:window.name + iframe
原理:window对象的name属性很特别,name值在不同的页面(甚至不同域名)加载后依旧存在,而且可以支持非常长的name值(2MB)。
var proxy = function(url, callback){
var state = 0;
var iframe = document.createElement("iframe");
//加载跨域页面
iframe.src = url;
iframe.onload = function(){
if(state == 0){
//第一次onload(跨域页)成功后,切换到同域代理页面
iframe.contentWindow.location = "http://www.nanhuaqiushui.com";
state = 1;
}else if(state == 1){
//第二次onload(同域proxy页)成功后,读取同域window.name中数据
callback(iframe.contentWindow.name);
destroyFrame();
}
}
}
documetn.body.appendChild(iframe);
//获取数据后销毁这个iframe,释放内存
function destroyFrame(){
iframe.contentWindow.document.write("");
iframe.contentWindow.close();
document.body.removeChild(iframe);
}
//请求跨域b页面数据
proxy("http://www.domain2.com/b.html",function(data){
alert(data);
});
方案四:postMessage跨域
postMessage是H5 中新的api,可解决以下问题:
页面和其打开的新窗口的数据传递;
多窗口之间消息传递;
页面与嵌套的iframe消息传递;
上面三个场景的跨域数据传递。
用法:postMessage(data,origin)
方法五:document.domain(两个iframe之间)
背景:同源策略认为域和子域隶属于不同的域,因此会被浏览器拦截。
方法:把它们的domain设置为相同的域
问题:安全性,当一个站点被攻击后,另一个站点也会引起安全漏洞;
如果一个页面中引入多个iframe,要想跨域访问,就要都设置为相同的domain值
方法六:ngix代理跨域
1.ngix配置解决iconfont跨域
背景:浏览器跨域访问js\css\img等常规静态资源被同源策略许可,但是iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时需在ngix的静态资源服务器中加入配置:;
location / {
add_header Access-Control-Allow-Origin * ;
}
2.ngix反向代理接口跨域
原理:同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨域问题。
实现思路:通过ngix配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前与cookie写入,实现跨域登录。
方案七:WebSocket协议跨域
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。
前端:
user input:
node后台:
var http = require(‘http‘);
var socket = require(‘socket.io‘);
// 启http服务
var server = http.createServer(function(req, res) {
res.writeHead(200, {
‘Content-type‘: ‘text/html‘
});
res.end();
});
server.listen(‘8080‘);
console.log(‘Server is running at port 8080...‘);
// 监听socket连接
socket.listen(server).on(‘connection‘, function(client) {
// 接收信息
client.on(‘message‘, function(msg) {
client.send(‘hello:‘ + msg);
console.log(‘data from client: ---> ‘ + msg);
});
// 断开处理
client.on('disconnect', function() {
console.log('Client socket has closed.');
});
});
原文地址:https://www.cnblogs.com/nanhuaqiushui/p/10493478.html