Как получить код состояния HTTP для неудачного запроса CORS в jQuery?

Question

Я отправляю запрос методом

response: [object Object]
response.status: 0
response.statusText: error
response.responseText: undefined
status: error
error: 

jQuery и хочу напечатать код состояния HTTP, если запрос не был выполнен.

Когда сам запрос POST / GET завершается неудачно с ошибка, все в порядке, и ошибка может быть легко напечатана в обратном вызове error. Однако, когда браузер отправляет предварительный запрос OPTIONS, и это не удается (например, с 404, потому что URL неверен), тогда обратный вызов не печатает ничего полезного.

Для примера ниже, напечатано следующее на консоль:

*1008*

Когда я проверяю сетевой запрос в отладчике браузера, получаются следующие заголовки ответа:

HTTP/1.0 404 NOT FOUND
Content-Type: application/json
Content-Length: 130
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Vary: Origin
Server: Werkzeug/1.0.0 Python/3.6.9
Date: Mon, 06 Apr 2020 13:01:47 GMT

Как получить код состояния 404 по порядку распечатать полезное сообщение об ошибке? На данный момент единственное, что я могу сделать, это напечатать unknown error, что не показывает, что проблема на самом деле в 404.

Пример кода:

import $ from 'jquery';

$(function() {
  $('#file-upload').on('change', function(e) {
    e.preventDefault();

    const files = $(this).prop('files');
    const file = files && files.length && files[0];

    const reader = new FileReader();
    reader.onload = (e) => {
      let encoded = e && e.target && e.target.result.toString().replace(/^data:(.*,)?/, '');

      $.ajax({
        type: 'POST',
        url: 'http://localhost:8000/upload',
        data: JSON.stringify({data: encoded}),
        contentType: 'application/json',
        dataType: 'json',
        cache: false,
        crossDomain: true,
        processData: true,

        success: (response) => {
          console.log('success');
        },

        error: (response, status, error) => {
          console.log("response: " + response);
          console.log("response.status: " + response.status);
          console.log("response.statusText: " + response.statusText);
          console.log("response.responseText: " + response.responseText);
          console.log("status: " + status);
          console.log("error: " + error);
        },

        complete: () => {
          $(this).val('');
        },
      });
    };

    if (file) {
      reader.readAsDataURL(file);
    }
  });

});

Answer 1

Проблема действительно заключалась в том, что мой сервер ответил 404 на запрос OPTIONS. Это заставило браузер интерпретировать запрос CORS на неудачу и, следовательно, не распространять какие-либо коды состояния.

Чтобы исправить это, я изменил сервер, чтобы всегда отвечать 200 на запрос CORS OPTIONS. Это делает запрос успешным, и браузер выполнит следующий запрос GET / POST, который затем завершается с ошибкой 404 и возвращает правильный сбой, который доставляется на внешний интерфейс правильно.