今天有人问我如何解决js跨域,总结了一下,以下是我整理的一些解决方法:
简单介绍一下什么是跨域:
跨站 HTTP 请求(Cross-site HTTP request)是指发起请求的资源所在域不同于该请求所指向资源所在的域的 HTTP 请求。
1、ajax跨域(js):
$(document).ready(function(){ var url='http://localhost:8080/hello?name=ajax&callback=?'; $.ajax({ url:url,dataType:'jsonp',processData: false,type:'get',success:function(data){ alert(data.name); },error:function(XMLHttpRequest,textStatus,errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); }}); });
后台java:
@RequestMapping(value = "/hello") public String getGroupById(@RequestParam("name") String name,HttpServletRequest request,HttpServletResponse response) throws IOException { String callback = request.getParameter("callback"); Map map = new hashMap(); map.put("hello",name); String json = JSON.toJSONSring(map); response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); out.print(callback + "(" + json + ")"); return null; }2、jsonp方式:
var url='http://localhost:8080/hello?name=ajax&callback=?'; $.jsonp({ "url": url,"success": function(data) { alert(data.hello); },"error": function(data,message) { //此处省略。。。。 } });
3、后台设置header(可以访问资源的路径):
httpServletResponse.setHeader("Access-Control-Allow-Origin","*");//*代表所有,可以写具体的地址,如果多个用逗号隔开
httpServletResponse.setHeader("Access-Control-Allow-Methods","POST");//请求的方式,多个用逗号隔开,如:POST,PUT....
httpServletResponse.setHeader("Access-Control-Allow-Headers","Access-Control");
httpServletResponse.setHeader("Allow","POST");
Access-Control-Allow-Origin:| * // 授权的源控制
Access-Control-Max-Age:// 授权的时间
Access-Control-Allow-Credentials: true | false // 控制是否开启与Ajax的Cookie提交方式
Access-Control-Allow-Methods:[,]* // 允许请求的HTTP Method
Access-Control-Allow-Headers:[,]* // 控制哪些header能发送真正的请求
参考文章: