ajax 跨域问题

前端之家收集整理的这篇文章主要介绍了ajax 跨域问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天有人问我如何解决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能发送真正的请求

参考文章

跨域资源共享 CORS详解

java,spring,tomcat跨域设置

原文链接:https://www.f2er.com/ajax/161335.html

猜你在找的Ajax相关文章