kubibay Ответов: 3

ajax request Cross-Origin Request Blocked error


Привет,

У меня есть два проекта; первый-это asp.net веб-проект и второй - это проект библиотеки встроенного http - сервера.

Проект встроенного HTTP-сервера взято из : проект встроенного HTTP-сервера

Я хочу сохранить видеофайл из локального хранилища пользователя в общее хранилище пользователя. Я получаю и отправляю файл из браузера с помощью ajax-запроса. Встроенный http-сервер должен получать bytearray и сохранять видео в общем хранилище клиента. У меня есть проблема, которую я потратил несколько дней, чтобы решить, но до сих пор не нашел решения.

В хроме он застревает на потоке.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);
                    }



By the way,

For IE: If I enabled "Access data sources across domains" from setting -security... then it works without error in IE.

For Chrome: If I start chrome with --disable-web-security parameter it works without error in chrome.

But I have find the solution from code.

Need suggestions urgently..

Sinisa Hajnal

У вас должна быть своя ajax-страница, и Ваша исходная страница должна иметь один и тот же домен.
например, если ваш сайт является www.example.com ваш Аякс должен был иметь www.example.com/something

Вы также можете попробовать установить ajax dataType в jsonp (вам придется погуглить детали, это из памяти).

kubibay

Они не находятся на одном сервере, веб-проект будет находиться на веб-сервере (в данном случае на виртуальном ПК), и любой клиент будет иметь свой собственный встроенный http-сервер для обработки ответов клиентов, я знаю, что это звучит странно, но я сохраню видеофайл с рабочего стола пользователя в общее хранилище через веб-проект. Я отправляю ajax-запрос из браузера клиента, и встроенный http-сервер будет обрабатывать этот запрос.

kubibay

Если я добавлю это в ajax-запрос; beforeSend: function (request) { request.setRequestHeader("Access-Control-Allow-Origin", "*"); request.setRequestHeader("Access-Control-Allow-Headers", "Content-Type");}, то отладка остановится на потоке.CopyTo(streamReader); если я закрываю веб-страницу, она продолжается, но на этот раз streamreader пуст, если я останавливаю http-сервер, то он выдает ту же ошибку...!

F-ES Sitecore

Это сервер, который должен вернуть заголовок "Access-Control-Allow-Origin".

csharpbd

Пожалуйста, прочтите это: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Может быть, это поможет тебе.

kubibay

Как только я установил "доступ к источникам данных через домены" для IE из internet options, он работает без ошибок для IE, но я не мог заставить его работать для Chrome и Firefox! Я в отчаянии , пожалуйста, помогите.. cors плагин для chrome не работает!

kubibay

Запуск chrome с параметром --disable-web-security сработал. Но я должен найти способ сделать это из сценария, так как я не могу попросить клиентов установить эти настройки для своих браузеров.

kubibay

любой комментарий ??, я потратил дни и не мог найти решение! Я подробно описал эту проблему..

3 Ответов

Рейтинг:
20

kubibay

I have found the solution, if anyone needs it;
I have used http://nancyfx.org/ 
Nancy.Hosting.Self library for embedded http server, Here I was able to add "Access-Control-Allow-Origin" to response.Headers so that I could transfer file without error.


Рейтинг:
0

Nitin Singh India

1) попробуйте переместить как клиентские, так и серверные приложения на одну машину (для тестирования). Если они работают нормально, то это только проблема CORS.
Если код WebAPI, установите атрибут EnableCors с подстановочным знаком на адрес клиента (если у вас нет конкретных). Вы можете установить это либо для определенных методов, либо для всего сайта.

Однако, похоже, ошибка заключается в чем-то другом, так как вы блокируетесь при установке заголовков в Chrome.
2) попробуйте перенести небольшой файл (несколько КБ) с текущими настройками, чтобы посмотреть, работает ли он. Если он действительно копируется, то ваш сетевой буфер был установлен слишком низко для целевых видеофайлов. Все браузеры имеют свой лимит передачи файлов, поэтому вам нужно увеличить его. Видеть ASP.NET максимальная длина запроса


Рейтинг:
0

ashishpotdar123

1) Установите этот пакет nuget в свое решение
Установите Пакет Microsoft.сеть САШ.Веб-API.Cors >> последняя версия
2) ваш контроллер должен быть
тест пространства имен
{
[EnableCors(происхождение: "*", заголовки: "*", методы: "*")]
публичный класс TestController : ApiController
{
// ваш код
}
}