Resource interpreted as Document but transferred with MIME type text/json:

痛定思痛。 2022-02-15 05:08 147阅读 0赞

## cause ##

后端代码：`response.setContentType("text/html; charset=UTF-8");`  
前端代码：把`success(Object data, String textStatus, jqXHR jqXHR)`的`data`参数当做对象使用，访问其成员属性`data.success`。

错误：  
报错`Resource interpreted as Document but transferred with MIME type application/json:`，  
意为`资源解释为文档，但是(我们)使用了MIME类型 text/json 去传输`。  
且：前端提示增加用户失败(即使后端数据库增加是成功的)。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]

## resolve ##

*  解决分两步：
    
     *  后端：修改`contentType`为`text/html`，这样不会报错(如题目)。  
        但`success(data)`方法内根据`data.success`执行的程序流程依旧不对。
     *  前端：将`string`类型的`data`解析为`JS object`(使用`JSON.parse(text)`方法)。  
        然后对解析后的对象进行使用。
 *  修改前：
    
     *  后端：`response.setContentType("text/json; charset=UTF-8");`  
        报错(如题目)。
     *  前端：

$("#fm).form("submit", {
        url: "/InsertUser",
        success: function(data, textStatus, jqXHR) {
            console.log("data: ", data);                // {"success":true, "msg":"新增用户成功"}
            console.log("textStatus: ", textStatus);    // undefined
            console.log("jqXHR: ", jqXHR);              // undefined
            console.log(Object.prototype.toString.call(data));  // [object String]  响应的是字符串
            // 所以data.success为undefined，所以一直会执行else代码块(即使后台增加用户的操作成功)。
            if (data.success) {
                $("#dlg").dialog("close);   // 关闭对话框
                $("#dg).datagrid("reload);  // 重载数据网格
            } else {
                alert("增加用户出错");
            }
        }
    });

数据库操作(增加用户)完成，但执行`else`代码块。。。WHY

*  修改后：
    
     *  后端：修改`contentType`为`text/html`，这样不会报错。  
        `response.setContentType("text/html; charset=UTF-8");`  
        虽然不报错`Resource interpreted as Document but transferred with MIME type application/json:`，  
        但是，就算后台增加用户成功，前端JS依旧执行else代码块(因为`data.success`未定义)。

那么如何访问到字符串中的`success`属性？  
我觉得有至少两种方法：

> 对字符串进行正则解析。获取success后面的值  
> 调用JSON.parse(text)将字符串解析为JS对象，然后访问对象的属性。  
> 以下为第二种：

*  前端：增加步骤，对字符串data解析，得到JS对象。这样可以访问其成员属性。

$("#fm).form("submit", {
        url: "/InsertUser",
        success: function(data, textStatus, jqXHR) {
            console.log(Object.prototype.toString.call(data));  // [object String]
            var obj = JSON.parse(data);     // 把字符串格式的JSON数据解析为JS对象。
            // 这样，obj.success才是读取到了对象的success属性值。
            if (obj.success) {
                $("#dlg").dialog("close);   // 关闭对话框
                $("#dg).datagrid("reload);  // 重载数据网格
            } else {
                alert("增加用户出错");
            }
        }
    });

## 另 ##

我觉得可能还有一种方法，  
后端：`response.setContentType("text/html; charset=UTF-8")`  
其中同时设置了`contentType`和`CharacterEncoding`两个响应头。

当`contentType`为`text/json`时，报错(见标题)。  
为其他多个值(经测试)，也报相似的错。  
只有修改为`text/html`后，不报如题目中的错误。

那么，可能存在一种我还未测试到的内容类型，既可以不报错，又可以直接返回`data`为对象类型。  
这样，只需要修改一点点后端代码。前端代码不变。

后续…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]: /images/20220215/09e2555c18564469b2bf1c30cec06563.png