AngularJS中$http.jsonp跨域请求问题

最新推荐文章于 2021-03-19 13:17:43 发布

原创最新推荐文章于 2021-03-19 13:17:43 发布 · 692 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了解决跨域问题的方法，通过在前端请求URL后添加JSON_CALLBACK参数，并在后端返回jsonp格式数据而非json数据，实现了跨域访问。具体介绍了如何在Java后端代码中处理这一过程。

废话不多说直接上代码：

前端请求比如是这样：http://localhost:8080/angularjs/json/test.json 在执行请求的时候肯定会有跨域问题，解决办法是请求url后面必须加上JSON_CALLBACK

如：“http://localhost:8080/angularjs/json/test.json?callback=JSON_CALLBACK”

当然仅仅前端设置是不够的，需要后天返回一个jsonp格式的数据，而不是json数据，那么我们先比较一下这两者的区别：

json格式：

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

jsonp格式：

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

看出来区别了吧，在url中callback传到后台的参数是神马callback就是神马，jsonp比json外面有多了一层，callback()。这样就知道怎么处理它了。于是修改后台代码。（看不懂没关系，有你的后台小伙伴帮你解决，看关键地方！）

@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 + ")");      <--- 关键代码在这里！！！
    returnnull;
  }
注意这里需要先将查询结果转换为json格式，然后用参数callback在json外面再套一层，就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。
到此跨域问题解决，亲测完美解决。
参考文档：http://blog.youkuaiyun.com/cn_hhaip/article/details/50040383
		跨域