ajax跨域的解决办法

最新推荐文章于 2022-10-11 17:35:46 发布

weixin_34112208

最新推荐文章于 2022-10-11 17:35:46 发布

阅读量59

点赞数

原文链接：https://my.oschina.net/zjllovecode/blog/1854503

版权

2019独角兽企业重金招聘Python工程师标准>>>

发生AJAX跨域的原因：

浏览器限制
跨域
XHR（XMLHttpRequest）请求

跨域问题来源于JavaScript的同源策略，即只有协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如<a>、<script>、<img> 几乎所有有src属性的都能进行跨域访问。

如何解决跨域问题

1、JSONP

　　JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

2、添加响应头，允许跨域
　　addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
　　addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

3、代理的方式
服务器A的test01.html页面想访问服务器B的后台action，返回“test”字符串，此时就出现跨域请求，浏览器控制台会出现报错提示，由于跨域是浏览器的同源策略造成的，对于服务器后台不存在该问题，可以在服务器A中添加一个代理action，在该action中完成对服务器B中action数据的请求，然后在返回到test01.html页面。

Demo1(添加允许跨域请求的响应头)

html页面

Web后台

现在用添加响应头的方式

Demo2(jsonp的callback方式)

这里演示的是jquery的ajax

$(document).ready(function(){
   var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
       +"?id=1&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);
     }});
   });

比较一下json与jsonp格式的区别：

json格式：

{
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
}

jsonp格式：

callback({
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
})

后台java代码最终如下：

@RequestMapping(value = "/getGroupById")
  public String getGroupById(@RequestParam("id") Long id,
      HttpServletRequest request, HttpServletResponse response)
      throws IOException {
    String callback = request.getParameter("callback");
    ReturnObject result = null;
    Group group = null;
    try {
      group = groupService.getGroupById(id);
      result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
    } catch (BusinessException e) {
      e.printStackTrace();
      result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
    }
    String json = JsonConverter.bean2Json(result);
    response.setContentType("text/html");
    response.setCharacterEncoding("utf-8");
    PrintWriter out = response.getWriter();
    out.print(callback + "(" + json + ")");
    return null;
  }

jquery-jsonp插件的方式

var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
    +"?id=1&callback=?";
$.jsonp({
  "url": url,
  "success": function(data) {
    $("#current-group").text("当前工作组:"+data.result.name);
  },
  "error": function(d,msg) {
    alert("Could not find user "+msg);
  }
});

参考：ajax跨域问题（三种解决方案）

Jsonp的使用方式，可以参考http://blog.csdn.net/alen1985/article/details/6365394，

Jspon优缺点可以参考http://blog.csdn.net/z69183787/article/details/19191385　　

转载于:https://my.oschina.net/zjllovecode/blog/1854503