跨域的概念
跨域大家都知道，不同地址，不同端口，不同级别，不同协议都会构成跨域。例如：about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同，都被当作是不同的域。下面举例，每两个一组。
URL 说明 是否允许通信http://www.haorooms.com/a.jshttp://www.haorooms.com/b.js 同一域名下 允许http://www.haorooms.com/lab/a.jshttp://www.haorooms.com/script/b.js 同一域名下不同文件夹 允许http://www.haorooms.com:8000/a.jshttp://www.haorooms.com/b.js 同一域名，不同端口 不允许http://www.haorooms.com/a.jshttps://www.haorooms.com/b.js 同一域名，不同协议 不允许
http://www.haorooms.com/a.jshttp://60.32.92.74/b.js 域名和域名对应ip 不允许http://www.haorooms.com/a.jshttp://about.haorooms.com/b.js 主域相同，子域不同 不允许http://www.haorooms.com/a.jshttp://haorooms.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）http://www.hao123.com/a.jshttp://www.haorooms.com/b.js 不同域名 不允许
解决跨域的方案
CORS跨域资源共享
所周知，我们之前跨域很多时候用的是jsonp的方式，jsonp的方式我后面介绍。下面说说CORS跨域和jsonp跨域的优势：
CORS与JSONP相比，无疑更为先进、方便和可靠。
1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。[低版本IE7以下不支持，要支持IE7还是要用jsonp方式]
CORS的使用
CORS要前后端同时做配置。
1、首先我们来看前端。
纯js的ajax请求。
<script type="text/javascript"> var xhr = new XMLHttpRequest(); //ie6以下用new ActiveXObject("Microsoft.XMLHTTP");可以做能力判断。 xhr.open("GET", "/haorooms",true); xhr.send();</script>
以上的haorooms是相对路径，如果我们要使用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>
当然，你也可以用jquery的ajax进行。
2、后端或者服务器端的配置
下面我们主要介绍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跨域也需要前后端配合使用。一般后端设置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方式进行jsonp跨域，我之前的一篇文章中提及过：http://www.haorooms.com/post/jquery_ajax_wg
/*
//简写形式，效果相同
$.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);
}
});
webpack解决跨域问题
（2017年3月补充） 除了上面的跨域解决方案之外，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
