使用jsonp解决跨域问题

最新推荐文章于 2023-08-29 20:18:45 发布

lazycece

最新推荐文章于 2023-08-29 20:18:45 发布

阅读量333

点赞数

分类专栏： spring mvc 文章标签： springmvc jsonp ajax

本文链接：https://blog.csdn.net/qq_28851503/article/details/78385526

版权

spring mvc 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在ajax的使用中，Jsonp可以解决跨域问题，不过需要服务端的接口做处理。

当然，如果自己玩的话，可以用一个浏览器插件即可解决跨域问题。

客户端的请求如下：

   $.ajax({
        url: URL,
        type: "GET",
        async: false,
        data: requestParam,
        dataType: "jsonp",
        jsonp: "callback",
        jsonpCallback: "dataDeal",
        success: function (message) {
           
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("statusText:" + XMLHttpRequest.statusText + "\nstatus: " + XMLHttpRequest.status + ";\nreadyState: " + XMLHttpRequest.readyState +
                ";\ntextStatus: " + textStatus);
            this;
    }

服务端的接口处理如下：

    @RequestMapping("/doManage")
    public void serviceForManage(HttpServletRequest httpServletRequest,
                                 String callback,
                                 HttpServletResponse httpServletResponse) {
        try {
            Writer out = httpServletResponse.getWriter();
            ResponseEntity response = service();//service处理逻辑
            log.info("callback = \n" + callback + "(" + response.toJsonString() + ")");
            out.write(callback + "(" + JSONUtils.toJSONString(response) + ")");
        } catch (Exception e) {
            log.error("api error:  " + e.getMessage());
        }
    }

在这里，client需要一个jsonp和jsonpcallback的两个参数，其中jsonp的参数callback对应于服务端的接口参数callback，而jsonpcallback的dataDeal对应于服务端接口中参数callback的值。