解决跨域问题

nginx代理解决跨域，去掉前缀

 server {
        listen       8081;    //监听8081端口
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root  /Users/xx/project;    //设置根路径
            index  index.html index.html;
        }

     location /api {        // 匹配url中带有api的，并转发到http://localhost:8080/api
         rewrite  ^/api/(.*)$ /$1 break;     // 利用正则进行匹配#去掉api前缀，$1是正则中的第一    
                                             // 串,这样后端的接口也不需要带api了                                      
         proxy_pass http://localhost:8080;   // 转发的参数设定
    }
}

跨域：指 域名、端口、协议等不同。

webpack解决跨域

需要安装webpack 的http-proxy-middleware，在config中的index.js中的dev中找到proxyTable

proxyTable:{               //解决跨域
            "/":{
                target:"http://192.168.2.114:8081/ptldjweb",
                changeOrigin:true,
                secure:false,
                pathRewrite:{
                   "^/":"" 
                }
            }
        },

2、CORS 跨域资源共享解决跨域问题

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

需要在服务器配置

1）Access-Control-Allow-Origin： *

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

允许任何域发起的请求都可以获取当前服务器的数据。当然，这样有很大的危险性，恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源，例如下面的设置使得只有www.haorooms.com这个域才能跨域访问服务器的API

2）Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

3、JSONP

JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。需要前后端配合使用。一般后端设置callback ，前端给后台接口中传一个callback 就可以。

$.ajax({  
    type : "get",  
    url : "跨域地址",  
    dataType : "jsonp",//数据类型为jsonp  
    jsonp: "callback",//服务端用于接收callback调用的function名的参数【后台接受什么参数，我们就传什么参数】我们上面设置是callback
    success : function(data){  
        //结果处理
    },  
    error:function(data){  
          console.log(data);
    }  
});

4、修改document.domain来跨子域

跨域的两个页面中设置document.domain就可以了。修改document.domain的方法只适用于不同子域的框架间的交互。

例如：1.在页面 http:// www.haorooms.com/a.html 中设置document.domain

<iframe id = "iframe" src="http://haorooms.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'haorooms.com';//设置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
    }
</script>

5、window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。

<script type="text/javascript">
    var state = 0, 
    iframe = document.createElement('iframe'),
    loadfn = function() {
        if (state === 1) {
            var data = iframe.contentWindow.name;    // 读取数据
            alert(data);    //弹出'I was there!'
        } else if (state === 0) {
            state = 1;
            iframe.contentWindow.location = "http://a.com/proxy.html";    // 设置的代理文件
        }  
    };
    iframe.src = 'http://b.com/data.html';
    if (iframe.attachEvent) {
        iframe.attachEvent('onload', loadfn);
    } else {
        iframe.onload  = loadfn;
    }
    document.body.appendChild(iframe);
</script>

6、window.postMessage方法跨域

window.postMessage虽然说是html5的功能，但是支持IE8+，假如你的网站不需要支持IE6和IE7，那么可以使用window.postMessage。关于window.postMessage，很多朋友说他可以支持跨域，不错，window.postMessage是客户端和客户端直接的数据传递，既可以跨域传递，也可以同域传递。

一个页面，页面中拿到部分用户信息，点击进入另外一个页面，另外的页面默认是取不到用户信息的，你可以通过window.postMessage把部分用户信息传到这个页面中。

发送数据：
window.postMessage('发送的数据');

//监听消息反馈
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的
    console.log('received response:  ',event.data);
},false);