用AJAX发送JSONP请求解决跨域资源访问

r囧r小猫 2022-04-24 09:34 487阅读 0赞

## intro ##

为解决跨域，引入`JSONP`(JSON with Padding)。

## API ##

jQuery的静态方法[$.ajax(url, ?settings)][.ajax_url_ _settings]的settings参数对象的成员有很多，  
和跨域所用的JSONP相关的成员有：`crossDomain, dataType, jsonpCallback, jsonp`

*  `crossDomain` 类型：`Boolean` (同域请求默认为`false`，跨域请求默认为`true`)  
    如果希望在同一域中强制跨域请求(如JSONP)，  
    将跨域的值设置为true。  
    例如，这允许服务器端重定向到另一个域。(版本补充道:1.5)
 *  `dataType` 类型：`String` (default: 智能猜测 (xml, json, script, or html))  
    您期望从服务器返回的数据类型。  
    如果没有指定，jQuery将根据响应的MIME类型推断它  
    (XML MIME类型将产生XML，在1.4 JSON将产生JavaScript对象，在1.4脚本将执行脚本，  
    任何其他内容都将作为字符串返回)。
 *  可用的类型(以及作为成功回调的第一个参数传递的结果)是:  
    `xml, html, text, script, json, jsonp`
    
     *  “xml”: 返回可以被jQuery处理的XML文档。
     *  “html”: 返回HTML作为纯文本;被包含的脚本标记会在插入DOM时被计算。
     *  “script”: 将响应计算为JavaScript并返回为纯文本。通过在URL后面附加一个查询字符串参数\_=\[TIMESTAMP\]来禁用缓存，除非将缓存选项设置为true。注意:这将把post转换为get用于远程域请求。
     *  “json”:将响应计算为JSON并返回一个JavaScript对象。具有回调占位符的跨域“json”请求，例如?callback=?，使用JSONP执行，除非请求的请求选项中包含JSONP: false。严格解析JSON数据;拒绝任何格式不正确的JSON，并抛出一个解析错误。在jQuery 1.9中，也拒绝空响应;服务器应该返回null或\{\}响应。(有关正确的JSON格式的更多信息，[请参见json.org][json.org]。)
     *  “jsonp”: 使用JSONP加载JSON块。在URL的末尾添加一个额外的“?callback=?”来指定回调。通过添加查询字符串参数“\_=\[TIMESTAMP\]”禁用缓存，，除非缓存选项设置为true。
     *  “text”: 纯文本字符串。

多个空格分隔的值:从jQuery 1.5开始，jQuery可以将数据类型从它在Content-Type头部接收到的数据类型转换为您需要的数据类型。例如，如果您希望文本响应被视为XML，那么对数据类型使用“text XML”。您还可以发出JSONP请求，将其接收为文本，并用jQuery将其解释为XML:“JSONP text XML”。类似地，类似于“jsonp xml”这样的简写字符串将首先尝试从jsonp转换为xml，如果失败，则先从jsonp转换为文本，然后再从文本转换为xml。

*  `jsonpCallback` 类型：`String`或`Function`  
    指定JSONP请求的回调函数名。  
    这个值将回用作替代由jQuery自动生成的随机的函数名称。  
    不过最好是让jQuery生成这个唯一的名称，这样会更容易管理请求，提供回调和处理错误。  
    当您希望对GET请求启用更好的浏览器缓存时，可能需要指定回调。  
    在jQuery 1.5中，您还可以使用一个函数来进行此设置，此时jsonpCallback的值被设置为该函数的返回值。
 *  `jsonp` 类型：`String`或`Boolean`  
    重写JSONP请求的回调方法的名称。  
    这个值将会被用于替代url中查询字符串的`callback=?`部分的`callback`这个参数名称`ParamName`。  
    (如：jsonp: "onJSONPLoad"会导致发送到服务器的URL的查询字符串中有`onJSONPLoad=?`)  
    从jQuery 1.5开始，将jsonp选项设置为false可以防止jQuery添加“?”回调“字符串到URL或试图使用“=?”进行转换。  
    在本例中，还应该显式地设置jsonpCallback设置。  
    例如，\{jsonp: false, jsonpCallback: “callbackName”\}。  
    如果您不信任Ajax请求的目标，出于安全原因，请考虑将jsonp属性设置为false。

## demo ##

前端JSONP请求：

$.ajax({
        type: "get",
        url: "http://localhost:8080/GetUsers",
        dataType: "jsonp",  /* dataType: 设置返回的数据类型 */
        jsonp: "callback",  /* jsonp: jQuery生成查询参数对的参数名称paramName，默认为callback。 */
        success: function(result) {
            console.log("成功", result);
        },
        error: function(jq) {
            console.log("失败", jq);
        }
    });

后端：

@ResponseBody
        @RequestMapping("/GetUsers")
        public String getUsers(@RequestParam("callback") String callback){
            String jsonStr = JSON.toJSONString(xxxObj);
            return String.formst("%s(%s)", callback, JSON.toJSONString(jsonStr));
            // return callback + "(" + jsonStr + ")";
        }

NOTE:  
\- 前后端约定好`jsonp`的值(默认为`callback`)。  
\- 后端根据jsonp参数名获取到参数后要与本来要返回的json数据按“callback(json)”的方式构造。

*  `Console`:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]
 *  `Network`:
    
     *  响应数据预览(preview)  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 1]

请求：`http://localhost:8080/GetUsers?callback=jQuery1124009844590394746122_1555941663831&_=1555941663832`

- 请求头`Headers`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 2]  
可以看到：自动生成了两个查询参数对。  
一个叫`callback`，另一个叫`_`。

而响应(请求返回的数据)是类似于一个函数的格式。  
`jQueryxxxxxx(数据)`  
函数名称为查询参数`callback`的值(jQuery随机生成这个值)。

添加`callback`参数值(jQuery随机生成)的目的是唯一标识这次请求。  
当服务器端接收到该请求时，需要将该参数的值与实际要返回的json值进行构造（如何构造下面讲解），并且返回，而前端会验证这个参数，如果是它之前发出的参数，那么就会接收并解析数据，如果不是这个参数，那么就拒绝接受。

[.ajax_url_ _settings]: https://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings
[json.org]: http://xn--json-480g137zfid.org
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]: /images/20220216/4c096877fd1b4530a6994a3b377e3cc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 1]: /images/20220216/9fc6cb901167456fbea1743e4a634a48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70 2]: /images/20220216/2514b4b26bba42b19ef30f4a057a84c3.png