同源策略 -- 跨域请求

前后端分离编码总是会遇到跨域问题，那么究竟应该如何解决呢？
所谓同源就是指：
1.协议相同
2.域名相同
3.端口相同

举例来说：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：不同源（端口不同）

同源策略的目的，是为了保护用户信息的安全，防止恶意的网络切取数据。目前来说，如果非同源，有以下三种行为受到限制：
1.cookie、ocalstorage、indexDB无法读取。
2.DOM无法获得
3.Ajax请求不能发送。

*跨域解决方案

*
1.通过jsonp跨域
这种方法的基本思想就是，网页通过添加一个

//原生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的网站请求数据。