浏览器跨域要先理解跨域，先理解同源的概念。同源是指两个uri的协议，域名和端口三者完全一致。跨域可理解为同源的反义。

一、什么是跨域？

要先理解跨域，先理解同源的概念。

同源是指两个uri的协议，域名和端口三者完全一致。
跨域可理解为同源的反义。

二、浏览器为什么要限制跨域？

由于浏览器的Cookie是存储在一起的，浏览器并没有区分。此时如果不限制同源，则会出现CSRF。比如访问你在浏览器里先登陆了银行的网站，银行把一些敏感信息写入了Cookie，之后你访问其他网站时都会携带这个Cookie，若果被恶意网站获取就容易被盗取银行信息。

浏览器厂商Netscape 为了避免出现这种高风险的行为，于是提出同源的安全策略来限制（不是完全禁止）跨域的发生。

三、两种跨域解决方案

两者都需要与被访问后台服务协商，即被访问的端需要对其他域的访问做出改动。

1.JSONP

**基于浏览器不限制脚本跨域。**因为很多图片和JS都是共享在网络的其他域的服务器上的，禁止脚本的跨域会带来很大的不便。

1） JSONP是从服务端返回的数据格式而言的。

一般的Rest的返回值为JSON格式，采用JSONP来解决跨域，需要服务器返回JSON的padding格式，也就是JavaScript格式，其内容为JavaScript函数的调用。

2）简单示例

位于localserver.com的foo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    function jsonp_callback(data){
        console.log(data); 
    };
    </script>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body></body>
</html>

位于remoteserver.com的remote.js

jsonp_callback({"data" : "远程返回数据"});

3）使用JS和Jquery实现JSONP

JS需要开发人员自己通过js代码来生成用来访问远程服务的<script>元素;
Jquery支持JSONP，在ajax里设置dataType为jsonp即可;

2.CORS

基于浏览器允许的跨域策略，需要服务端设置Access-Control-Allow-Origin

浏览器跨域