为什么会出现跨域问题
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
例如：
http://www.abc.com/a/b 调用 http://www.abc.com/d/c（非跨域）
http://www.abc.com/a/b 调用 http://www.def.com/d/c （跨域：域名不一致）
http://www.abc.com:81/a/b 调用 http://www.abc.com:82/d/c （跨域：端口不一致）
http://www.abc.com/a/b 调用 https://www.abc.com/d/c （跨域：协议不同）
localhost和127.0.0.1虽然都指向本机，但也属于（跨域）。
如何解决跨域问题
1.使用jsonp（不推荐）
jsonp解决跨域问题的原理：浏览器的script标签是不受同源策略限制的，我们可以在script标签中访问任何域名下的资源文件。
所以我们可以用script标签从服务器中请求数据，同时服务器返回一个带有方法和数据的js代码，请求完成，调用本地的js方法，来完成数据的处理。
前端部分：
$.ajax({
url:"",
dataType:'jsonp',
data:'',
jsonp:'callback', //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
success:function(result) { //成功的处理
},
});
$.ajax({
url: "http://localhost:12079/WebForm2.aspx",
data: "p1=1&p2=2&callback=?",
type: "post",
processData: false,
timeout: 15000,
dataType: "jsonp", // not "json" we'll parse
jsonp: "jsonpcallback",
success: function(result) {
alert(result.value1);
}
});
比较一下json与jsonp格式的区别：
json格式:
{
"message":"获取成功",
"state":"1",
"result":{"name":"工作组1","id":1,"description":"11"}
}
jsonp格式:
callback({
"message":"获取成功",
"state":"1",
"result":{"name":"工作组1","id":1,"description":"11"}
}) //服务端此时返回的是一段可以被前端js执行的一段js代码。
从格式来看，jsonp是在json的基础上包装了一个方法名，此方法名是前端请求传过来的，如请求地址为：http://localhost:1234/index?callback=JSONP_CALLBACK，那么方法名就是JSONP_CALLBACK。
jsonp的缺点：
1、JSONP是一种非官方的方法，而且这种方法只支持GET方法，不如POST方法安全。（从实现机制就可明白）。
2、JSONP的实现需要服务器配合，如果是访问的是第三方的服务器，我们没有修改服务器的权限，那么这种方式是不可行的。
2.使用服务器代理（不懂）
这种方式运用的就是服务器的反向代理技术，控制客户端和服务器的访问都从代理服务器经过，比如用nginx作为服务器代理，在nginx上配置客户端和第三方服务的反向代理，这样就可保证客户端、第三方是同源的了，同一个源，都来自代理服务器。
关于nginx的反向代理配置，可访问我的这篇博客：http://blog.csdn.net/csdn_ds/article/details/58605591
服务器代理的缺点：
开发比较麻烦，对开发环境比较严格，需要在本机上配置代理服务器。
优点:
完美解决使用jsonp，第三方服务没有修改权限的问题。程序的代码侵入性小，代码级别不需要考虑跨域问题。
3.使用服务器代理
在被请求的Response Header中加入如下代码：
// 指定允许其他域名访问
response.setHeader("Access-Control-Allow-Origin", "*"); // 响应类型
response.setHeader("Access-Control-Allow-Methods", "POST"); // 响应头设置
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名
例如：response.setHeader(“Access-Control-Allow-Origin”,”http://www.client.com”);
缺点：
1、此种解决跨域方案，需要浏览器支持H5，因为这是HTML5解决跨域的方式，如果产品面向的是PC端，这种方式可能就不是一个好的解决方案，如果面向的是手机端，此方法不为一个简单、粗暴的好方式。
2、设置*，存在安全隐患。
4.使用插件
一个专门用来解决跨域问题的jQuery插件-jquery-jsonp。
var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
+"?id=1&callback=?";
$.jsonp({
"url": url,
"success": function(data) {
$("#current-group").text("当前工作组:"+data.result.name);
},
"error": function(d,msg) {
alert("Could not find user "+msg);
}
});