1.什么是跨域问题
1.1跨域:Cross Domain Request,请求不同的域上的资源(HTML/CSS/JS/SCRIPT/JPEG等),不同的域可能是:
(1)不同的协议
(2)不同的域名
(3)不同的端口号
1.2默认情况下,浏览器可以针对HTML、CSS、JS、图片发起跨域请求——同步请求。
非跨域资源 跨域资源
同步请求 可以 可以
异步请求(XHR) 可以 不可以
1.3使用场景:项目很大,于是把静态HTML放在A服务器,动态数据(PHP文件)放在B服务器,动态数据(JSP文件)放在C服务器;A服务器上的静态HTML需要动态数据,必需使用异步请求——不能使用XHR发起跨域请求。
2.如何解决
2.1后端解决
response.setHeader("Access-Control-Allow-Origin", "*");
Access-Control-Allow-Origin这个Header在W3C标准里用来检查该跨域请求是否可以被通过,如果值为*则表明当前页面可以跨域访问。默认的情况下是不允许的。
2.2前端解决
通过jsonp跨域请求的方式。JSONP和JSON虽然只有一个字母的区别,但是他们完全就是两回事,很多人很容易把他们搞混。JSON是一种数据交换的格式,而JSONP则是一种非官方跨域数据交互协议。
2.2.1前端
$.ajax({
url:"your url",
type:"get or post",
async:false,
dataType : "jsonp",
jsonp:"callbackparam",//服务端用于接收callback调用的function名的参数
//callback的function名称
jsonpCallback:"success_jsonpCallback",
success:function(data){
console.log(data);
},
error:function(data){
console.log(data);
}
});
2.2.2后端
PrintWriter out =null;
String callback=req.getParameter("callbackparam");
String json=callback+"({'status':'ok'})";
try
{
out = resp.getWriter();
} catch (IOException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
out.print(json);
out.flush();
out.close();
2.2.3调用输出
success_jsonpCallback({'status':'ok'})
引自