浏览器跨域常用解决方案总结

什么是跨域

跨域大家都知道，不同地址，不同端口，不同级别，不同协议都会构成跨域。例如：about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同，都被当作是不同的域。

CORS 跨域资源共享

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

使用方法
CORS要前后端同时做配置。

前端：AJAX

<script type="text/javascript">
    var xhr = new XMLHttpRequest();//ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。
    xhr.open("GET", "http://www.haorooms.com/CORS",true);
    xhr.send();
</script>

后端：Apache 和 php
Apache：Apache需要使用mod_headers模块来激活HTTP头的设置，它默认是激活的。你只需要在Apache配置文件的 < Directory >, < Location>, < Files >或< VirtualHost>的配置里加入以下内容即可：

Header set Access-Control-Allow-Origin *  

PHP：只需要使用如下的代码设置即可。

<?php  
 header("Access-Control-Allow-Origin:*"); 

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

 Access-Control-Allow-Origin: http://www.haorooms.com 

jsonp 跨域

JSONP的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

当通过<script>元素调用数据时，响应内容必须用javascript函数名和圆括号包裹起来，而不是发送这样一段JSON数据。

jsonp跨域也需要前后端配合使用。一般后端设置callback ，前端给后台接口中传一个callback 就可以。

前端：

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://haorooms.com/data.php?callback=dosomething"></script>

后端：

<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>

通过 AJAX 方式跨域：

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

CORS跨域和jsonp跨域的优势：
CORS与JSONP相比，无疑更为先进、方便和可靠。

1. JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

2. 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

3. JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。[低版本IE7以下不支持，要支持IE7还是要用jsonp方式]

webpack解决跨域问题

webpack也可以解决前端跨域问题，只需要安装webpack 的http-proxy-middleware模块就可以

npm install http-proxy-middleware --save-dev

配置：

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: './app/js/index.js'
    output: {
        path: path.resolve(__dirname, 'dev'),
        // 所有输出文件的目标路径
        filename: 'js/bundle.js',
        publicPath: '/',
        chunkFilename: '[name].chunk.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dev'),
        publicPath: '/',
        historyApiFallback: true,
        proxy: {
            // 请求到 '/device' 下 的请求都会被代理到 target： http://debug.haorooms.com 中
            '/device/*': { 
                target: 'http://debug.haorooms.com',
                secure: false, // 接受 运行在 https 上的服务
                changeOrigin: true
            }
        }
    }
}

使用：

 fetch('/device/space').then(res => {
        // 被代理到 http://debug.haorooms.com/device/space
        return res.json();
    }).then(res => {
        console.log(res);
    })

    fetch('device/space').then(res => {
        // http://localhost:8080/device/space 访问本地服务
        return res.json();
    }).then(res => {
        console.log(res);
    })

注：使用的url 必须以/开始 否则不会代理到指定地址。

谷歌浏览器跨域设置

找到谷歌浏览器快捷方式，右键——》快捷方式——》目标，在后面加上这句话：

--disable-web-security --user-data-dir