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

Question

我有两个项目；第一个是 asp.net 网络项目，第二个是嵌入式 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：如果我从设置安全中启用 "Access data sources across domains"，那么它在 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 服务器使用了 http://nancyfx.org/ Nancy.Hosting.Self 库，在这里我能够将 "Access-Control-Allow-Origin" 添加到 response.Headers 以便我可以无错误地传输文件。

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

AJAX request Cross-Origin Request Blocked error

javascript

c#

ajax

cors