1

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

以下是正在使用的代码：

索引.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", "*");
}

但这没有任何效果。

当出现这种错误时，让异步剑道文件上传工作的方法是什么，我找不到任何遭受同样情况的人？

4

1 回答 1

0

有几件事：

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 的字符串，则控件会发出声音

于 2013-10-24T20:15:32.533 回答