前端跨域学习小结
一、什么是跨域
跨域，指的是浏览器不能执行其他网站的脚本，通过js在不同的域之间进行数据传输或通信。它是由浏览器的同源策略（域名，协议，端口均相同）造成的，是浏览器对JavaScript施加的安全限制。
举个栗子：
http://www.qianqianshijie.com:8080/frame/World
协议：http://
端口号：8080
当协议、域名、端口号有任意一个不同的时候，就算不同的“域”
二、使用跨域的情况
在工作中需要使用AJAX请求其他域名下的请求，可能会出现拒绝访问的情况，这是基于安全的考虑，AJAX只能访问本地的资源，而不能进行跨域请求。
三、跨域的方法
1、代理服务器
在使用浏览器进行AJAX请求的时候，经常会出现跨域的问题，所以我们一般会在本地启动一个代理服务器，拦截前端页面的异步请求，从本地服务器转发到远程服务器，得到response后再返回给前端页面。
举个栗子1：
Nodejs中间件代理跨域，vue.js:通过修改webpack的config/index.js
proxyTable:{
'/api/*':{
target:'http://192.168.1.1:8080/api/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
举个栗子2：
nginx反向代理：通过在本地配置一个nginx服务器，转发到公司相应的服务器上
server {
listen 8080; #监听8080端口，可以改成其他端口
server_name localhost; # 当前服务的域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://localhost:8088;
proxy_redirect default;
}
location /apis { #添加访问目录为/apis的代理配置
rewrite ^/apis/(.*)$ /$1 break;
proxy_pass http://localhost:8090;
}
2、JSONP
Jsonp利用了script标签的src属性是没有跨域的限制的，从而达到跨域访问的目的。因此它的最基本原理就是：动态添加一个标签来实现。
缺点：只能使用get方法，不能使用post方法，没有错误提示
$.ajax({
url:'http://baidu.com',
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(rpt){
alert('success' + JSON.stringify(rpt));
}.
error:fucntion(error){}
}
})
3、CORS（cross-origin sharing standard）策略
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
前端：
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.baidu.com/model", true);
xhr.send();
服务器：
设置Access-Control-Allow-Origin来进行，
在header设置
header（“Access-Control-Allow-Origin:*");
“*”号表示允许任何域向我们的服务端提交请求
4、 WebSocket协议跨域
1.）前端代码：
user input：
var socket = io('http://www.domain2.com:8080');
// 连接成功处理
socket.on('connect', function() {
// 监听服务端消息
socket.on('message', function(msg) {
console.log('data from server: ---> ' + msg);
});
// 监听服务端关闭
socket.on('disconnect', function() {
console.log('Server socket has closed.');
});
});
document.getElementsByTagName('input')[0].onblur = function() {
socket.send(this.value);
};
2.）Nodejs socket后台：
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.');
});
});
5、postMessage跨域(XHR2)
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
1.） 页面和其打开的新窗口的数据传递
2.） 多窗口之间消息传递
3.） 页面与嵌套的iframe消息传递
4.） 上面三个场景的跨域数据传递
用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
1.）a.html：(http://www.domain1.com/a.html)
var iframe = document.getElementById('iframe');
iframe.onload = function() {
var data = {
name: 'aym'
};
// 向domain2传送跨域数据
iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
};
// 接受domain2返回数据
window.addEventListener('message', function(e) {
alert('data from domain2 ---> ' + e.data);
}, false);
2.）b.html：(http://www.domain2.com/b.html)
// 接收domain1的数据
window.addEventListener('message', function(e) {
alert('data from domain1 ---> ' + e.data);
var data = JSON.parse(e.data);
if (data) {
data.number = 16;
// 处理后再发回domain1
window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
}
}, false);
6、 window.name + iframe跨域
7、 document.domain + iframe跨域
8、 location.hash + iframe
四、总结
看了相关跨域知识，感觉自己需要成长的地方还蛮多的，个人理解，目前用代理服务器解决跨域问题比较多，jsonp个人感觉有缺陷，CORS（cross-origin sharing standard）策略、WebSocket协议跨域感觉可以在实际项目中（如果兼容性要求不是特别高的情况）去使用，性能方面可能会更好一点。至于后面几种方法，有机会尝试!
