跨域问题

同源策略

只有当协议，ip地址和端口号都保持一致，才是同源。只要有一项不一致就是跨域。

跨域问题的解决策略

1. jsonp

网页通过添加一个`<script>元素`，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。
jsonp缺点：只能实现get一种请求。

2 postMessage

存在两个页面，使用了iframe

//a.html
// src就是demo2的地址
<iframe id="iframe" src="http://www.demo2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向demo2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.demo2.com');
    };

    // 接受demo2返回数据
    window.addEventListener('message', function(e) {
        alert('data from demo2 ---> ' + e.data);
    }, false);
</script>

//demo2
<script>
    // 接收demo1的数据
    window.addEventListener('message', function(e) {
        alert('data from demo1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 处理后再发回demo1
            window.parent.postMessage(JSON.stringify(data), 'http://www.demo1.com');
        }
    }, false);
</script>

3 CROS

前端不用修改
服务端使用Access-Control-Allow-Origin：* 。（这个参数的设置很重要，*默认允许所有跨域请求。可以了解一下这个参数）
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
//一般都是使用这个吧。

4：nginx代理

在服务器上面/user/local/nginx文件夹下面的nginx.conf
修改文件里面server下面的location。可以写多个location

#proxy服务器
server {
    listen       80;
    server_name  www.domain1.com;

    location / {
        index  index.html index.htm;
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名   
    }
    location /name {
        proxy_pass   http://www.ceshi.com;  #反向代理
    }
}
修改完之后，要重启nginx,走到/user/local/nginx/sbin文件夹下执行 nginx -s reload （重启）


//前端代码
var xhr = new XMLHttpRequest();
// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:80/?user=admin', true); //监听的80端口，匹配/,经过代理，走的是http://www.domain2.com:8080;
xhr.open('get', 'http://www.domain1.com:80/ceshi?user=admin', true); //监听的80端口，匹配/ceshi,经过代理，走的是http://www.ceshi.com
xhr.send();

5：websocket协议跨域 6：其实还有很多策略，我只是写了这几种，可以参考这篇文章segmentfault.com/a/119000001…