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=?,?号时你要执行的回调方法。
具体参考:
JSONP实现
1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback)),然后以JavaScript语法的方式,生成一个function
2、接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端。
3、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片段,此时数据作为参数传入到了预先定义好的回调函数里(动态执行回调函数)。
这种动态解析js文档和eval函数是类似的。
jsonp例子:
后端接口:
接口返回:
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>
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,就可以实现父页面调用子页面的函数
具体参考:
6) 更多解决方案
使用HTML5中新引进的window.postMessage方法来跨域传送数据: 和 使用window.name来进行跨域