devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ASP.NET WebApi 上传文件时异常 Failed to execute send on XMLHttpRequest 的一个处理方法_networkerror: failed to execute 'send' on 'xmlhttp

作者：凡人多烦事01 | 2024-05-25 11:23:55

赞

踩

networkerror: failed to execute 'send' on 'xmlhttprequest': failed to load

笔者最近写了一个通过ASP.NET MVC4 WebApi、jQuery、ajax和FormData上传文件的系统（见基于ASP.NET MVC4、WebApi、jQuery和FormData的多文件上传方法），在自己的笔记本上测试一切正常，但发布到客户服务器（云服务器，Windows Server 2012 操作系统，有很强防火墙保护）时，部分文件上传正常，但多数文件上传抛出如下异常信息（被jquery的ajax 的 error 捕获）：NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load http://xxx/Api/FilesApi/Upload。这里，Upload是路由api、控制器FilesApi的Post方法。

网查了许多方法，一般说是跨域调用引起的异常，但使用介绍的相关方法都没有解决该问题。笔者估计是防火墙检查了通过http传入的文件内容以及文件名，或者是浏览器有很强的内容过滤功能，发现它认为有威胁的关键字符串，就拒绝调用相关Api方法。为此，笔者想到了通过html5引入的FileReader对象（FormData也是html5引入），在客户端使用该对象的异步方法readAsURLData获取文件内容的base64加密文本（注意，FileReader.readAsURLData()方法使用了UTF-8编码做base64加密），然后通过FormData发送该文本，在服务器WebApi中解密该文本，然后保存文件。同样，使用了一个base64加密的js插件，加密上传的文件名。

如下是Home控制器对应的客户端脚本（仅上传两个文件）Index.cshtml：

  1. @model CSUST.Files.TDirItems
  2.  
  3. @{
  4.     Layout = null;
  5. }
  6.  
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10.     <title>文件上传</title>
  11. <script type="text/javascript" src='@Url.Action("jquery-1.12.4.min.js", "scripts")'></script>
  12. <script type="text/javascript" src='@Url.Action("jquery.base64.min.js", "scripts")'></script>
  13.  
  14. <script type="text/javascript">
  15.  
  16.     var fileData = [];
  17.  
  18.     $(document).ready(function ()
  19.     {
  20.         $("#tbFileName1").on("change", function(){
  21.             GetFile(this);
  22.         });
  23.  
  24.         $("#tbFileName2").on("change", function () {
  25.  
  26.             GetFile(this);
  27.         });
  28.     });
  29.  
  30.     
  31.     function GetFile(fileObj)
  32.     {
  33.         fileData[fileObj.id] = null;
  34.  
  35.         var fileName = $(fileObj).val();
  36.         if (fileName == null || fileName == "")  // 文件名为空
  37.         {
  38.             return;
  39.         }
  40.  
  41.         var files = $(fileObj).get(0).files;
  42.         if (files[0].size > 4 * 1024 * 1024)
  43.         {
  44.             alert("单个文件不能大于4M。");
  45.             $(fileObj).val("");
  46.             return;
  47.         }
  48.  
  49.         var reader = new FileReader();
  50.         reader.readAsDataURL(files[0]);
  51.         
  52.         reader.onload = function ()
  53.         {
  54.             var base64 = reader.result;
  55.             var n = base64.indexOf("base64,");
  56.             fileData[fileObj.id] = base64.substr(n + 7);
  57.         }
  58.     }
  59.  
  60.     function Clear()
  61.     {
  62.         $("#tbFileName1").val("");
  63.         $("#tbFileName2").val("");
  64.     }
  65.  
  66.     function Upload()
  67.     {
  68.         var f1 = $("#tbFileName1").val();
  69.         var f2 = $("#tbFileName2").val();
  70.  
  71.         if ((f1 == null || f1 == "") && (f2 == null || f2 == ""))
  72.         {
  73.             alert("至少要上传一个文件。");
  74.             return;
  75.         }
  76.  
  77.         if (f1 != "" && fileData["tbFileName1"] == null)
  78.         {
  79.             alert("尚未读取文件1，稍后！");
  80. 			return;
  81.         }
  82.  
  83.         if (f2 != "" && fileData["tbFileName2"] == null)
  84.         {
  85.             alert("尚未读取文件2，稍后！");
  86. 			return;
  87.         }
  88. 		
  89. 		if(f1 == f2)
  90. 		{
  91. 			alert("不能上传相同文件。");
  92. 			return;
  93. 		}
  94.  
  95.         var n1 = $("#tbTicket").val();
  96.         var n2 = $("#ckAllowNewFiles").is(":checked");
  97.         var n3 = $("#cbDirNameKeys").val();
  98.  
  99.         if (n1 == "")
  100.         {
  101.             alert("必须输入验证口令。");
  102.             return;
  103.         }
  104.  
  105.         if (n3.indexOf("\\") == 0)
  106.         {
  107.             alert("不能选择\\注释格式的文件夹项。");
  108.             return;
  109.         }
  110.  
  111.         var formData = new FormData();
  112.  
  113.         formData.append("VerifyTicket", n1);
  114.         formData.append("AllowNewFiles", n2);
  115.         formData.append("DirNameKey", n3);
  116.  
  117.         if (f1 != "")
  118.         {
  119.             formData.append("FileName1", $.base64('encode', f1));
  120.             formData.append("FileContent1", fileData["tbFileName1"]);
  121.         }
  122.  
  123.         if (f2 != "")
  124.         {
  125.             formData.append("FileName2", $.base64('encode', f2));
  126.             formData.append("FileContent2", fileData["tbFileName2"]);
  127.         }
  128.  
  129.         SendFiles(formData);
  130.     }
  131.  
  132.     function SendFiles(formData)
  133.     {
  134.         $.ajax({
  135.             type: "post",
  136.             url: '@Url.Action("Upload", "Api/FilesApi")',
  137.             async: false,
  138.             data: formData,
  139.             contentType: false,
  140.             processData: false,
  141.             success: function (data, status)
  142.             {
  143.                 if (status != "success")
  144.                 {
  145.                     alert("上传文件失败: " + status);
  146.                     return;
  147.                 }
  148.  
  149.                 if (data == null)
  150.                 {
  151.                     alert("上传文件失败, 没有返回结果。");
  152.                     return;
  153.                 }
  154.  
  155.                 if (data.IsFailed == true)
  156.                 {
  157.                     alert(data.ErrorMessage);
  158.                     return;
  159.                 }
  160.  
  161.                 alert(data.Note);
  162.  
  163.                 $("#tbFileName1").val("");
  164.                 $("#tbFileName2").val("");
  165.             },
  166.             error: function (xhr, status, err)
  167.             {
  168.                 alert("上传文件异常: " + status + "," + err);
  169.             }
  170.         });
  171.     }
  172. </script>
  173. </head>
  174. <body>
  175.     <form id="Form1">
  176.         <div align="center">
  177.             <h2><label>@Model.WebSiteTitle</label></h2>
  178.             <table style="width: 1050px;" border="1">
  179.                 <tr style="height: 32px">
  180.                     <td rowspan="2" style="width: 120px;text-align:center">
  181.                         文件名
  182.                     </td>
  183.                     <td colspan="2" align="left">
  184.                         <input ID="tbFileName1" name="tbFileName1" type="file" style="width: 96%;"/>
  185.                     </td>
  186.                 </tr>
  187.                 <tr style="height: 32px">
  188.                     <td colspan="2" align="left">
  189.                         <input ID="tbFileName2" name="tbFileName2" type="file" style="width: 96%;"/>
  190.                     </td>
  191.                 </tr>
  192.                 <tr style="height: 42px">
  193.                     <td style="text-align: center">到文件夹</td>
  194.                     <td style="width: 650px; text-align: left;">
  195.                         <select ID="cbDirNameKeys" style="width: 650px;">
  196.                             @foreach(CSUST.Files.TDirItem item in Model.DirItems)
  197.                             {
  198.                                 <option>@item.DirNameKey</option>
  199.                             }
  200.                         </select>
  201.                     </td>
  202.                     <td style="width: 280px; text-align:left;">
  203.                         <input type="checkbox" ID="ckAllowNewFiles" />
  204.                         <label for="ckAllowNewFiles">新增cshtml.css.js.jpg等文件</label>
  205.                     </td>
  206.                 </tr>
  207.                 <tr style="height: 42px;">
  208.                     <td style="height: 42px; text-align: center;">校验口令</td>
  209.                     <td style="height: 42px; text-align: left;">
  210.                         <input type="password" id="tbTicket" style="width: 645px;" />
  211.                     </td>
  212.                     <td style="height: 42px; text-align:center;">
  213.                         <input type="button" ID="bnUpload" value="上传文件" οnclick="Upload()" style="width: 96px; height: 32px;"/>   
  214.                         <input type="button" ID="bnClearFile" value="清空文件" οnclick="Clear()" style="width: 96px; height: 32px;" />
  215.                     </td>
  216.                 </tr>
  217.             </table>
  218.         </div>
  219.     </form>
  220. </body>
  221. </html>
如下是服务器端ASP.NET MVC4的WebApi对应的POST方法Upload： 

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Web;
  4. using System.Web.Http;
  5.  
  6. namespace CSUST.Files
  7. {
  8.     public class FilesApiController : ApiController
  9.     {
  10.         [HttpPost]
  11.         public CSUST.Web.TWebApiResult Upload()
  12.         {
  13.             try
  14.             {
  15.                 var httpRequest = HttpContext.Current.Request;
  16.  
  17.                 var dirNameKey = httpRequest.Form["DirNameKey"];
  18.                 var allowNewFiles = httpRequest.Form["AllowNewFiles"];
  19.                 var verifyTicket = httpRequest.Form["VerifyTicket"];
  20.  
  21.                 if (dirNameKey.StartsWith(TDirItem.NoteChars) == true)
  22.                 {
  23.                     return new Web.TWebApiResult("不能选择" + TDirItem.NoteChars + "注释格式的文件夹项。");
  24.                 }
  25.  
  26.                 TDirItems dirItems = new TDirItems();
  27.                 if (dirItems.VerifyTicket != verifyTicket)
  28.                 {
  29.                     return new Web.TWebApiResult("验证口令错误。");
  30.                 }
  31.  
  32.                 List<string> fileNames = new List<string>();
  33.                 List<string> fileContents = new List<string>();
  34.  
  35.                 if (string.IsNullOrWhiteSpace(httpRequest.Form["FileName1"]) == false)
  36.                 {
  37.                     string fileName1 = this.GetFileNameByBase64(httpRequest.Form["FileName1"]);
  38.                     fileNames.Add(fileName1);
  39.                     fileContents.Add(httpRequest.Form["FileContent1"]);
  40.                 }
  41.  
  42.                 if (string.IsNullOrWhiteSpace(httpRequest.Form["FileName2"]) == false)
  43.                 {
  44.                     string fileName2 = this.GetFileNameByBase64(httpRequest.Form["FileName2"]);
  45.                     fileNames.Add(fileName2);
  46.                     fileContents.Add(httpRequest.Form["FileContent2"]);
  47.                 }
  48.  
  49.                 CSUST.Text.TStringItemsBuilder sb = new Text.TStringItemsBuilder(Environment.NewLine);
  50.                 foreach (var fn in fileNames)
  51.                 {
  52.                     if (dirItems.IsAllowedFileName(dirNameKey, fn) == false)
  53.                     {
  54.                         sb.AppendItem(fn + "不能保存到指定的文件夹中。");
  55.                     }
  56.  
  57.                     var saveFileName = dirItems.GetSavedFileName(dirNameKey, fn);
  58.  
  59.                     if (System.IO.File.Exists(saveFileName) == false && allowNewFiles.ToUpper() != "TRUE")
  60.                     {
  61.                         sb.AppendItem(fn + "新文件时必须勾选新增复选框。");
  62.                     }
  63.                 }
  64.  
  65.                 if (sb.Length > 0)
  66.                 {
  67.                     return new Web.TWebApiResult(sb.ToString());
  68.                 }
  69.  
  70.                 sb.Clear();
  71.                 sb.AppendItem("保存文件成功:");
  72.                 for (int k = 0; k < fileNames.Count; k++)
  73.                 {
  74.  
  75.                     var saveFileName = dirItems.GetSavedFileName(dirNameKey, fileNames[k]);
  76.                     byte[] fb = Convert.FromBase64String(fileContents[k]);
  77.                     using (System.IO.FileStream fs = new System.IO.FileStream(saveFileName, System.IO.FileMode.Create, System.IO.FileAccess.Write))
  78.                     {
  79.                         fs.Write(fb, 0, fb.Length);
  80.                         fs.Flush();
  81.                         sb.AppendItem(saveFileName);
  82.                     }
  83.                 }
  84.  
  85.                 CSUST.Web.TWebApiResult r = new Web.TWebApiResult() { Note = sb.ToString() };
  86.                 return r;
  87.             }
  88.             catch (Exception err)
  89.             {
  90.                 return new CSUST.Web.TWebApiResult(err, true);
  91.             }
  92.         }
  93.  
  94.         private string GetFileNameByBase64(string base64FileName)
  95.         {
  96.             byte[] b = Convert.FromBase64String(base64FileName);
  97.             string fileName = System.Text.Encoding.UTF8.GetString(b);  // 前端使用了base64加密，防止文本串被防火墙拒绝
  98.             return System.IO.Path.GetFileName(fileName);
  99.         }
  100.     }
  101. }

经过上述技术处理后提交一般文件正常，但在上传Global.asax文件时，仍然抛出上述异常。测试时把该文件改名为@@Global.asax则可正常上传。显然，浏览器或防火墙把Global.asax作为威胁拒绝了（笔者估计是浏览器拒绝了上传提交）。

目前看，问题部分获得解决。但是否还有加密后的文本被防火墙或浏览器视为威胁，不得而知。根本上，目前还不清楚到底是浏览器还是防火墙或Windows Server2012拒绝了WebApi访问。当然，可以与网管协商放开防火墙做测试看看。不过防火墙由用户方控制，涉及到云服务等的安全，一般不会放开。

碰到一堵墙时，可以找人开个口子，也可以搭个梯子翻过去。呵呵，笔者采用了后一种方法。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/621865
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号