XMLHttpRequest не может отправить куки, если прогресс отслеживается

Question

У меня есть простой код, который отправляет файлы на сервер от https://app.myserver:4202 до https://myserver/backend/upload.php:

//script executed on`https://app.myserver:4202`
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://myserver.com/backend/upload.php");
xhr.withCredentials = true;
xhr.send(fd); //fd is formdata from file input

ууу, он успешно отправляет файлы с cookie, чтобы я мог выполнить аутентификацию пользователя в своем скрипте upload.php. Теперь я также хочу отобразить индикатор выполнения, поэтому я изменил код так:

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://myserver.com/backend/upload.php");
xhr.withCredentials = true;
xhr.upload.addEventListener("progress", function(evt){
  if (evt.lengthComputable) {
        console.log("add upload event-listener" + evt.loaded + "/" + evt.total);
     }
  }, true);
xhr.send(fd);

Вау, весь ад вырвался на свободу! У нас есть проблема с CORS. Обратите внимание, что я добавил только трекер прогресса.

Access to XMLHttpRequest at 'https://myserver/backend/upload.php' from origin 'https://myserver:4202' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Я позаботился о правильной настройке CORS, так что это myserver заголовки ответа, относящиеся к CORS

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: origin, x-requested-with, content-type
Access-Control-Allow-Methods: DELETE, HEAD, GET, OPTIONS, POST, PUT
Access-Control-Allow-Origin: https://app.myserver.com:4202
Access-Control-Max-Age: 86400

Они работают хорошо, если информация о прогрессе не требуется, но не работают, когда она отслеживается.

Так скажи мне, что мне здесь не хватает?

Answer 1

У нас есть проблема с CORS. Обратите внимание, что я добавил только трекер прогресса.

Это поведение определено в спецификации :

Регистрация одного или нескольких прослушивателей событий в объекте XMLHttpRequestUpload приведет к запросу предварительной проверки CORS. (Это происходит потому, что регистрация прослушивателя событий приводит к установке флага прослушивателя загрузки, что, в свою очередь, приводит к установке флага use-CORS-preflight.)

---

Я позаботился о правильной настройке CORS, так что это заголовки ответов myserver, которые имеют отношение к CORS

Внимательно прочитайте сообщение об ошибке:

Доступ к XMLHttpRequest в 'https://myserver/backend/upload.php' от источника' https://myserver:4202' заблокирован политикой CORS: Ответ на предполётный запрос не проходит проверку контроля доступа: Это не имеет статуса HTTP ok .

Так что заданные вами заголовки HTTP-ответа не очень актуальны.

Браузер делает запрос OPTIONS, чтобы запросить разрешение на выполнение запроса POST, а сервер отвечает чем-то другим, чем 200 OK.

Возможно, это отправка 405 Method Not Allowed. Перейдите на вкладку «Сеть» инструментов разработчика, чтобы точно узнать статус HTTP-ответа, а затем настройте сервер соответствующим образом.