Tag Archives: “Resource interpreted as Document but transferred with MIME type application/json”

Solve the problem of “resource interpreted as document but transferred with MIME type application / JSON” in IE browser

When uploading a picture, use ajax to submit, and the returned data format is json. In the test, it was found that in the IE browser, after uploading the picture, the picture was not displayed, but a prompt popped up: whether to save the UploadImg.json file; but it is normal in other browsers.

After debugging in Chrome, I found that after the image was uploaded successfully, the browser gave a warning: Resource interpreted as Document but transferred with MIME type application/json.

When the original backend code returns json data, the ContentType of the response data is “application/json” by default. The new version of IE browser (IE10, IE11) will interpret this type as a file download operation.

Background code:

public JsonResult UploadImgToLocal()
        {
            var FileMaxSize = 10240 ; // File size in K      
            var model = new ImgUploadResult();
             try
            {
                HttpPostedFile myFile = HttpContext.Current.Request.Files[0];
                if (myFile != null)
                {
                    string fileExtension = myFile.FileName.Substring(myFile.FileName.LastIndexOf('.'));
                    if (!CheckValidExt(fileExtension))
                    {
                        return Json( new {UploadCode = 104 , massege = " File format error " });
                    }
                    else
                    {
                        if (myFile.ContentLength > FileMaxSize * 1024)
                        {
                            return Json( new {UploadCode = 105 , massege = " File is too large " });
                        }
                        else
                        {
                            // Upload

                            // Return the result 
                            return Json( new {UploadCode = 100 , massege = "" , sourceUrl = model.SourceImgUrl, bigUrl = model.BigImgUrl, thumbUrl = model.ThumbImgUrl });
                        }
                    }
                }
                else
                {
                    return Json( new {UploadCode = 102 , massege = " Please upload the file " });
                }
            }
            catch
            {
                return Json( new {UploadCode = 101 , massege = " Upload failed " });
            }
        }

In the code

return Json(new { UploadCode = 100, massege = "", sourceUrl = model.SourceImgUrl, bigUrl = model.BigImgUrl, thumbUrl = model.ThumbImgUrl });

To:

JsonResult json = new JsonResult();
json.ContentType = "text/html";
json.Data = new { UploadCode = 100, massege = "", sourceUrl = model.SourceImgUrl, bigUrl = model.BigImgUrl, thumbUrl = model.ThumbImgUrl };
return json;

After modifying the ContentType of the response data, the returned data type is a json string, which will be compatible with IE browser.