AJAX请求跨源请求被阻止的错误

Question

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

嵌入式HTTP服务器项目是取自：嵌入式HTTP服务器项目

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

在Chrome浏览器卡住了stream.CopyTo(streamReader);。

在Firefox和IE中，它提供了“Cross-Origin Request Blocked”错误，但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：如果我启用“通过域访问数据源”来设置安全性，然后在IE中无误地运行。

对于Chrome浏览器：如果我使用--disable-web-security parameter启动Chrome，它在Chrome中无误地运行。但是我从代码中找到了解决方案。

Answer 1

我找到了解决方案，如果有人需要它; 我已经使用了http://nancyfx.org/ Nancy.Hosting.Self库用于嵌入式http服务器，在这里我能够将“Access-Control-Allow-Origin”添加到response.Headers中，以便我可以无误地传输文件。

Answer 2

可能是这个问题是在客户端浏览器。例如，谷歌浏览器在默认情况下被阻止为跨网站。为了让它可以使用插件：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi