ASP.NET 的 Kendo UI Uploader 异步跨站点脚本问题答案

【问题标题】：Kendo UI Uploader Async Cross Site Scripting Issue with ASP.NETASP.NET 的 Kendo UI Uploader 异步跨站点脚本问题
【发布时间】：2013-10-24 07:27:10
【问题描述】：

我尝试在 ASP.NET 环境中以异步模式使用 Kendo UI Uploader，使用与该站点上的演示非常相似的代码，并且在 IE8 和 Chrome 上都出现了 JQuery 跨站点脚本错误30.0.1599.101 米

以下是正在使用的代码：

index.chtml

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/kendostyles/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendostyles/kendo.default.min.css" rel="stylesheet" />
    <script src="scripts/kendojs/jquery.min.js"></script>
    <script src="scripts/kendojs/kendo.all.min.js"></script>
</head>
<body>



<div style="width:45%">
    <div style="width:45%">
        <div class="demo-section">
            <input name="files" id="files" type="file" />
        </div>
    </div>

    <script>

        $(document).ready(function () {

            $("#files").kendoUpload({
                async: {
                    saveUrl: "save",
                    removeUrl: "remove",
                    autoUpload: true
                }
            });
        });
    </script>
</div>


</body>
</html>

我有非常简单的上传代码，甚至没有被击中，但为了完整性我会提供它：

public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
{
    // The Name of the Upload component is "files"
    if (files != null)
    {
        foreach (var file in files)
        {
            // Some browsers send file names with full path.
            // We are only interested in the file name.
            var fileName = Path.GetFileName(file.FileName);
            var physicalPath = Path.Combine(Server.MapPath("~/Uploads"), fileName);
            // The files are not actually saved in this demo
            // file.SaveAs(physicalPath);
        }
    }

    // Return an empty string to signify success
    return View();
}

现在选择要上传的文件后，我会收到以下 javascript 弹出消息：

Error! Upload failed.Unexpected server response - see console.

查看控制台后，我得到以下信息：

Server response: Error trying to get server response: SecurityError: Blocked a frame with origin "http://localhost:21739" from accessing a frame with origin "null".  The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.

为了在搜索类似问题后解决问题，我尝试通过更改 global.asax 文件绕过问题

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
}

但这没有任何效果。

当出现此类错误时，如何让 Async Kendo File Upload 正常工作，我一直找不到遇到同样情况的人？

【问题讨论】：

CORS 是否在服务器上工作？我猜不是。
从未尝试过，但看看encosia.com/… 是否可以帮助您。如果确实如此，或者您找到了其他解决方案，请随时回答自己。
好吧，因为它在内置的 Visual Studio 缩减版本的 IIS (casini) 上，我可以看到这是一个问题，而且我需要在 10 之前支持 IE，文章说那不行，所以可能不得不放弃这个想法
CORS 在 IE8 中受支持，但用于实现它的 API 是微软自己的，它可能比更高版本的 IE 或其他浏览器提供的限制更多。
糟糕，我收回了。 我们所说的 CORS 可能会或可能不会被明确支持，但 IE8 中确实存在跨域支持。奥耶。

标签： c# jquery asp.net asp.net-mvc kendo-ui

【解决方案1】：

有几点：

1) chrome 明确指出了 XSS 问题。除非 chrome 控制台显示跨站点脚本错误，否则我认为这不是您的问题。

2) 在出错时给自己添加一个回调。

$("#files").kendoUpload({
            async: {
                saveUrl: "save",
                removeUrl: "remove",
                autoUpload: true
            },
            error: onError
        });

function onError(e){
alert("Failed to upload " + e.files.length + " files " + e.XMLHttpRequest.status + " " + e.XMLHttpRequest.responseText);
}

这会给你来自服务器的响应。

3) 不确定您使用的是 Asp.net MVC 还是 Web Api 控制器（看起来像 ASP.Net MVC），但是（也许我错了）您的保存属性似乎需要控制器或路由详细信息。

          $("#files").kendoUpload({
            async: {
                saveUrl: "MyControllerName/save", (or api/controller) ( or @Url.Action("Save", "ControllerName")
                removeUrl: "remove",
                autoUpload: true
            }
        });

4) 返回 KendoUI 上传不会喜欢返回类型 ActionResult 它需要 JsonResult 返回类型。 更正：对此不是 100% 确定的。请注意返回数据的结构。如果它是具有格式良好的 HTML 的字符串，则控件会叫

【讨论】：

感谢 TSmith，关于 ASP.Net MVC 以及控制器设置不正确，您是非常正确的，我已经解决了这个问题（不敢相信我错过了，说这是关于我今天尝试测试大文件上传的第 5 种方式，我可能需要 14 小时）
我一直找不到任何文档说返回需要是 jsonresult 所有示例都是操作结果
OK 新问题似乎是返回 View();在控制器中，返回 Content("");让它工作，仍然有大文件的问题（600 meg 立即失败）但这不是这篇文章的重点，感谢您的帮助
酷。是的，我可能在返回类型上说错了。但在我的场景中，我将上传附加到 KendoUI 编辑器，并且需要将文件内容（文本数据）返回给上传器以更新编辑器。起初我尝试返回一个 PartialViewResult 导致上传者发疯。因此，我将数据包装在 JsonResult 中，并通过 DOM api 更新了编辑器。所以这就是我的出发点......
是的，有道理:) 我之前用过编辑器，回到寻找可靠的跨浏览器大文件上传组件