js跨域及解决方案
1. 产生原因
浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。
一个网站的网址组成包括协议名，子域名，主域名，端口号。当在在页面中从一个url请求数据时，如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同，就会产生跨域问题。
即使是在
即使是在
http://localhost:80/ 页面请求 http://127.0.0.1:80/ 也会有跨域问题2. 产生场景
当要在在页面中使用js获取其他网站的数据时，就会产生跨域问题：
XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access.3. 解决方案
方案选择：
Access-Control-Allow-Origin是html5新增的一项标准，IE10以下是不支持的，所以如果产品面向的是PC端，就要使用服务端代理或jsonp
1) 使用jsonp
原理
jsonp解决跨域问题的原理是，浏览器的script标签是不受同源策略限制(你可以在你的网页中设置script的src属性问cdn服务器中静态文件的路径)。那么就可以使用script标签从服务器获取数据，请求时添加一个参数为callbakc=?，?号时你要执行的回调方法。
具体参考：
http://segmentfault.com/a/1190000002647143#articleHeader5
JSONP实现
1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback))，然后以JavaScript语法的方式,生成一个function
2、接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端。
3、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片段,此时数据作为参数传入到了预先定义好的回调函数里(动态执行回调函数)。
这种动态解析js文档和eval函数是类似的。
jsonp例子：
后端接口：
手动调用接口： http://localhost:8080/springmvc0006/base/json.do?callback=jsonpCallback
接口返回：
jsonpCallback({"name":"content1","age":"20"})
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import net.sf.json.JSONObject;
//JAVA中使用JSON进行数据传递,用于java生成json字符串，和java解析json字符串
//net.sf.json jar包
@Controller
public class JsonpController {
@RequestMapping("/base/json.do")
public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {
try {
response.setContentType("text/plain");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
Map<String,String> map = new HashMap<String,String>();
map.put("name", "content1");
map.put("age", "20");
PrintWriter out = response.getWriter();
JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json
String jsonpCallback = request.getParameter("callback");//客户端请求参数
// out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据
System.out.println(resultJSON.toString());
out.println(jsonpCallback+"("+resultJSON.toString()+")");//返回jsonp格式数据
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
// TODO Auto-generated method stub
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
//方法一
$.getJSON("http://localhost:8080/springmvc0006/base/json.do?sid=1494&busiId=101&callback=?",
function(data){
alert(data.name);
$("#showcontent").text("Result:"+data.name)
});
//方法二
$.ajax({
type : "get",
async:false,
url : "http://localhost:8080/springmvc0006/base/json.do?sid=1494&busiId=101",
dataType : "jsonp",//数据类型为jsonp
jsonp: "callback",//服务端用于接收callback调用的function名的参数
success : function(data){
$("#showcontent1").text("Result1:"+data.name)
},
error:function(){
alert('fail');
}
});
});
//方法三
</script>
<script type="text/javascript">
function jsonpCallback(result){
alert(result.name);//jsonpCallback({"name":"content1","age":"20"})
}
</script>
<script type="text/javascript"src="http://localhost:8080/springmvc0006/base/json.do?sid=1494&busiId=101&callback=jsonpCallback"></script>
<div id="showcontent">Result:</div>
<div id="showcontent1">Result1:</div>
</body>
</html>
注意： js中的 jsonp: "callback" 与 后端/base/json.do?callback=jsonpCallback 二者的参数名一致。
2） 服务端设置Request Header头中Access-Control-Allow-Origin
这种方式只要服务端把response的header头中设置
Access-Control-Allow-Origin为制定可请求当前域名下数据的域名即可。一般情况下设为即可。这样客户端就不需要使用jsonp来获取数据。
操作： 只需要后端（服务器）做设置即可
浏览器支持
Access-Control-Allow-Origin是html5新增的一项标准，IE10以下是不支持的
Access-Control-Allow-Origin是html5新增的一项标准，IE10以下是不支持的
3）服务端代理
这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，
再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域。
http://segmentfault.com/a/1190000002647143#articleHeader5
http://my.oschina.net/lwaif/blog/481154?p={{totalPage}}
4） 基于script标签实现跨域
script标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态创建script标签，代码如下：
Java代码 收藏代码
var script = document.createElement('script');
script.src = "http://aa.xx.com/js/*.js";
document.body.appendChild(script);
这样通过动态创建script标签就可以加载其它域的js文件，然后通过本页面就可以调用加载后js文件的函数，这样做的缺陷就是不能加载其它域的文档，只能是js文件，jsonp便是通过这种方式实现的，jsonp通过向其它域传入一个callback参数，通过其他域的后台将callback参数值和json串包装成javascript函数返回，因为是通过script标签发出的请求，浏览器会将返回来的字符串按照javascript进行解析执行，实现了域与域之间的数据传输。
jquery中对jsonp的支持也是基于此方案。
5） 基于iframe实现跨域
基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于一个基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数
具体参考：
http://my.oschina.net/lwaif/blog/481154?fromerr=8OIlQWkJ
6） 更多解决方案
使用HTML5中新引进的window.postMessage方法来跨域传送数据： 和 使用window.name来进行跨域
http://www.cnblogs.com/2050/p/3191744.html
http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html