前后端分离编码总是会遇到跨域问题,那么究竟应该如何解决呢?
所谓同源就是指:
- 协议相同
- 域名相同
- 端口相同
举例来说:http://www.example.com/dir/page.html
个网址中,协议是http://
,域名是www.example.com
,端口号是80
*(默认)
http://www.example.com/dir2/other.html:同源
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(端口不同)
同源策略的目的,是为了保护用户信息的安全,防止恶意的网络切取数据。目前来说,如果非同源,有以下三种行为受到限制:
- cookie、ocalstorage、indexDB无法读取。
- DOM无法获得
- Ajax请求不能发送。
跨域解决方案
1.通过jsonp跨域
这种方法的基本思想就是,网页通过添加一个<script>
元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
//原生js
function addScriptTag(src) {
var script = document.createElement('script'); //添加script元素
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag('http://example.com/ip?callback=foo'); //注意callback
}
function foo(data) {
console.log('Your public IP address is: ' + data.ip);
};
当服务器收到这个请求以后,会将数据放在回调函数的参数位置返回。
foo({
"ip": "8.8.8.8"
});
当然jQuery Ajax也可以实现,直接上代码
$.ajax({
url: 'http://example.com/ip',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "foo", // 自定义回调函数名
data: {}
});
jsonp 最大的特点就是简单适用,老式浏览器全部支持,服务器改造非常小。但是jsonp 只能实现get一种请求。
2.websocket协议跨域
websocket是html5的一种新协议,它实现了浏览器和服务器的全双工通信,同时允许跨域通信
来看一段实现代码
<div>
user input:<input type="text">
</div>
<script src="./socket.io.js"></script>
<script>
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);
};
</script>
上面代码使用的是Socket.io,它很好的封装了websocket接口,提供了更简单灵活的接口,也对不支持websocket的浏览器提供了向下支持
3.跨域资源共享CORS
cors是一个w3c标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器发出XMLHttpRequest请求,从而客服了AJAX只能同源使用的限制。
普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。
看下实现代码:
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
jQuery实现
$.ajax({
...
xhrFields: {
withCredentials: true // 前端设置是否带cookie
},
crossDomain: true, // 会让请求头中包含跨域的额外信息,但不会含cookie
...
});
CORS与JSONP的使用目的相同,但是比JSONP更强大。
JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。