jsonp的使用，解决跨域资源引起CORB问题

淩亂°似流年 2021-12-17 16:23 706阅读 0赞

原文地址：[https://segmentfault.com/a/1190000018313378\#articleHeader5][https_segmentfault.com_a_1190000018313378_articleHeader5]

## 一、jsonp的使用 ##

jsonp是实现跨域请求数据的一种方式，解决了由于浏览器同源策略带来的安全限制；虽然浏览器有同源策略的限制，但对于一些特殊的dom元素却可引用非同源资源，例如<img src=""/> <script src=""/>等，下面结合例子说明：

*  ### jquery直接发起ajax调用 ###

**服务端代码**

@RequestMapping(value = "/load/data")
    public void loadData2(@RequestParam("callback") String callback,
                         HttpServletResponse response) throws IOException {
        Map<String, String> data = new HashMap<>();
        data.put("name", "xudj");
        data.put("age", "18");
        // 转json
        String jsonData = JSON.toJSONString(data);
    
        //用回调函数名称包裹返回数据
        String result = callback + "(" + jsonData + ")";
        response.getWriter().write(result);
    }

**客户端代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>跨域测试</title>
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#btn").click(function () {
                    $.ajax({
                        url: 'http://localhost:8080/load/data',
                        type: 'GET',
                        success: function (data) {
                            $(text).val(data);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
    <input id="btn" type="button" value="跨域请求数据" />
    <textarea id="text" style="width: 200px; height: 100px;"></textarea>
    </body>
    </html>

**调用结果**  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfUl9MX1Q_size_16_color_FFFFFF_t_70][]  
如上，当在localhost:9090站点访问localhost:8080的接口资源时，出现跨域错误。

> 如错误提示，可在服务器端代码中设置响应头“Access-Control-Allow-Origin”实现允许跨域

*  ### script解决跨域问题 ###

**服务端代码**  
如上不变

**客户端代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>script解决跨域</title>
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script>
            //回调函数
            function showData (result) {
                //json对象转成字符串
                var data = JSON.stringify(result);
                $("#text").val(data);
            }
            $(document).ready(function () {
                $("#btn").click(function () {
                    // 向头部输入一个脚本，该脚本发起一个跨域请求
                    $("head").append("<script src='http://localhost:8080/load/data?callback=showData'><\/script>");
                });
            });
        </script>
    </head>
    <body>
    <input id="btn" type="button" value="跨域请求数据" />
    <textarea id="text" style="width: 200px; height: 100px;"></textarea>
    </body>
    </html>

**调用结果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfUl9MX1Q_size_16_color_FFFFFF_t_70 1][]

*  ### jsonp解决跨域 ###

**服务端代码**  
如上不变

**客户端代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jsonp解决跨域</title>
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script>
            // 回掉函数，默认callback=jQuery30004159376653216822_1550582355513
            function showData(data) {
                console.info("Get Into showData");
                // json对象转成字符串
                var result = JSON.stringify(data);
                $("#text").val(result);
            }
            // 调用
            $(document).ready(function () {
                $("#btn").click(function () {
                    $.ajax({
                        url: "http://localhost:8080/load/data",
                        type: "GET",
                        dataType: "jsonp", //指定服务器返回的数据类型
                        jsonpCallback: "showData",  // 指定回调函数名称或直接使用回掉函数success
                        jsonp: "callback",   // 默认callback
                        success: function (data) {
                            console.info("Get Into success");
                            // json对象转成字符串
                            // var result = JSON.stringify(data);
                            // $("#text").val(result);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
    <input id="btn" type="button" value="跨域请求数据"/>
    <textarea id="text" style="width: 200px; height: 100px;"></textarea>
    </body>
    </html>

**调用结果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfUl9MX1Q_size_16_color_FFFFFF_t_70 2][]

> 通过指定ajax的dataType为“jsonp”，jsonp指定服务端返回jsonp格式数据；请求会自动带上参数callback=?

--------------------

## 二、CORB问题的由来 ##

当服务端代码中添加安全响应头时：  
**服务端代码**

@RequestMapping(value = "/load/data")
        public void loadData2(@RequestParam("callback") String callback,
                             HttpServletResponse response) throws IOException {
            // 安全响应头
            response.addHeader("X-Content-Type-Options", "nosniff");
            response.setContentType("text/html;charset=UTF-8");
    
            Map<String, String> data = new HashMap<>();
            data.put("name", "xudj");
            data.put("age", "18");
            // 转json
            String jsonData = JSON.toJSONString(data);
    
            //用回调函数名称包裹返回数据
            String result = callback + "(" + jsonData + ")";
            response.getWriter().write(result);
        }

> 如上所示，代码中多出  
> // 安全响应头  
> response.addHeader("X-Content-Type-Options", "nosniff");  
> response.setContentType("text/html;charset=UTF-8");

导致使用jsonp解决跨域的请求出现如下错误：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfUl9MX1Q_size_16_color_FFFFFF_t_70 3][]

> 如上，如果服务端代码没有指定ContentType时，则出现如下错误：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfUl9MX1Q_size_16_color_FFFFFF_t_70 4][]  
以上均是由response.addHeader("X-Content-Type-Options", "nosniff");导致的浏览器执行script时通过对MIME类型检测过滤掉不安全的文件或请求。

## 三、原因分析 ##

CORB（Cross-Origin Read Blocking）：浏览器在加载可以跨域资源时，在将资源载入页面时对其进行识别与拦截等一系列处理。
    X-Content-Type-Options(:nosniff)：相当于一个提示标志，被服务器用来提示客户端须遵循在Content-Type首部中对MIME类型的设定，不能对其进行修改。从而禁用了客户端（浏览器）的MIME类型嗅探行为（即把不可执行的MIME类型转变为可执行的MIME类型）。指定值为nosniff时，会拒绝以下两种请求：

*  请求类型：style，MIME类型不是“text/css”
 *  请求类型：script，MIME类型不是“Javascript类型”，Javascript类型有text/javascript、application/javascript、application/x-javascript等

所以，当服务端出现response.addHeader("X-Content-Type-Options", "nosniff");安全相应头，且未指定Content-Type为Javascript类型类型时，jsonp请求跨域资源时变出现如上CORB或拒绝解析的问题。

## 四、解决办法 ##

根据第三步问题原因的分析中可知，修改方法有如下两种：

1.  去除服务端response.addHeader("X-Content-Type-Options", "nosniff");的配置，但可能造成一些安全上的问题，笔者这里不做扩展，有兴趣的同学可以留言讨论
2.  服务指定Content-Type为Javascript类型的一种即可
3.  启用jsonp，将跨域的数据请求转到本站服务器，由本站服务器去做跨域请求，即跳过浏览器同源策略的限制

[https_segmentfault.com_a_1190000018313378_articleHeader5]: https://segmentfault.com/a/1190000018313378#articleHeader5
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfUl9MX1Q_size_16_color_FFFFFF_t_70]: /images/20211213/f39de073d4394154b520b21dabb747e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfUl9MX1Q_size_16_color_FFFFFF_t_70 1]: /images/20211213/ad64e0f365f64ea3af13b57d6a27f833.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfUl9MX1Q_size_16_color_FFFFFF_t_70 2]: /images/20211213/e969d97380aa4e9e93831871d1ab31e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfUl9MX1Q_size_16_color_FFFFFF_t_70 3]: /images/20211213/dc86f3e9ab0344059fc2a9071c53e5f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RfUl9MX1Q_size_16_color_FFFFFF_t_70 4]: /images/20211213/543087f51f814b6797d1f35cd51c6f08.png