Question

我有两个项目;第一个是asp.net web项目，第二个是嵌入式http服务器库项目。

嵌入式http服务器项目取自：嵌入式http服务器项目

我想将用户本地的视频文件保存到用户的共享存储中。我使用ajax请求从浏览器获取和发送文件。嵌入式http服务器应该获得字节数组并将视频保存在客户端的共享存储上。我有一个问题，我花了几天时间来解决但尚未找到解决方案。

在Chrome中，它停留在stream.CopyTo(streamReader);。

在Firefox和IE中，它提供了＃34;跨源请求被阻止＆＃34;错误，但Firefox保存文件，即使它给出错误。

这是ajax请求代码：

$(document).ready(function () {

      function hashFile(file, chunkSize, callback) {
        var size = file.size;
        var offset = 0;
        var chunk = file.slice(offset, offset + chunkSize);

        SendChunk(chunk,0);

        var hashChunk = function () {
            var reader = new FileReader();
            reader.onload = function (e) {

                offset += chunkSize;

                if (offset < size) {
                    chunk = file.slice(offset, offset + chunkSize);

                    SendChunk(chunk,0);
                } 
                else if (offset > size){
                    offset -= chunkSize;
                    var newchunkSize = size - offset;

                    chunk = file.slice(offset, offset + newchunkSize);

                    SendChunk(chunk,1);
                }
            };

            reader.readAsArrayBuffer(chunk);
        };

        function SendChunk(chunk,end){

            if(end>0)
            {
                 var ajaxRequest = $.ajax({
                    type: "POST",
                    url: "http://clientip:8080/savefileend",
                    contentType: false,
                    processData: false,
                    data: chunk
                });
            }
            else{
                var ajaxRequest = $.ajax({
                    type: "POST",
                    url: "http://clientip:8080/savefile",
                    contentType: false,
                    processData: false,
                    data: chunk
                });

                ajaxRequest.done(function (e) {
                    hashChunk();

                });
                ajaxRequest.error(function (xhr) {
                    console.log(e);
                    hashChunk();
                });
            }
        }
    }

    function fileInputHandler(evt) {
        var files = evt.target.files;
        var chunkSize = 10485760; // bytes
        var start = window.performance ? performance.now() : Date.now(); // DEBUG
        var onHashFile = function (digest) {
            var end = window.performance ? performance.now() : Date.now(); // DEBUG
            console.log(this.name, digest, (end - start) + 'ms'); // DEBUG
        };
        for (var i = 0, len = files.length; i < len; i++) {
            hashFile(files[i], chunkSize, onHashFile);
        }
    }

    document.getElementById('file1')
  .addEventListener('change', fileInputHandler, false);
});

以下是获取请求的嵌入式服务器代码：

var stream = request.GetRequestStream();

                using (var streamReader = new MemoryStream())
                {
                    stream.CopyTo(streamReader);
                    videoTemp = streamReader.ToArray();
                }

                using (var fileStream = new FileStream(path, FileMode.Append))
                {
                    fileStream.Write(videoTemp, 0, videoTemp.Length);
                }

顺便说一下：

对于IE：如果我启用了＃34;跨域访问数据源＆＃34;从设置安全性，然后它在IE中没有错误。

对于Chrome：如果我使用--disable-web-security parameter启动Chrome，则Chrome浏览器可以正常运行。但是我从代码中找到了解决方案。

Answer 1

可能是客户端浏览器出现此问题。例如，默认情况下，Google Chrome会被阻止跨域。要允许它，您可以使用插件：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Answer 2

如果有人需要，我找到了解决方案; 我使用了http://nancyfx.org/ Nancy.Hosting.Self库来嵌入http服务器，在这里我能够添加＆＃34; Access-Control-Allow-Origin＆＃34; to response.Headers，以便我可以无错误地传输文件。

AJAX请求跨源请求阻止错误

2 个答案: