Нет доступа к ответу при кроссдоменном запросе

Question

На сайте имеется форма авторизации. Скрипт собирает данные в json-объект и отправляет его POST-запросом на сервер. Данные принимает сервлет, передает их в DAO откуда они поступают в БД. В качестве проверки, что все прошло хорошо, с БД обратно передается результат выполнения запроса. Скрипт его принимает, однако, статут ответа = 0. Ниже приведен код запроса.

function sendDataToServer( data ) {
    let body = "data=" + encodeURIComponent( data );

    let xhr = new XMLHttpRequest();
    xhr.withCredentials = true;

    xhr.open( "POST", "http://localhost:8080/buildersGuide/authorizationServlet" );
    xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );

    xhr.send( body );

    if ( xhr.status != 200 ) { 
        alert( `Ошибка ${xhr.status}: ${xhr.statusText}` ); 
    } else { 
        document.location.href = "http://localhost:8080/buildersGuide/login";
    }
};

При просмотре данных сети в отладчике обнаруживается, что запрос прошел успешно, статус 200, результат все таки передан.
После поиска и сбора информации в качестве решения проблемы было принято добавить в сервлет код для HTTP-заголовков ответа:

    response.addHeader( "Access-Control-Allow-Origin", "*" );
    response.addHeader( "Access-Control-Allow-Headers", "origin, content-type, accept, authorization" );
    response.addHeader( "Access-Control-Allow-Credentials", "true" );
    response.addHeader( "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD" );

Проверил наличие заголовков ответов с помощью HTTP Header Live. Заголовки на месте. Но браузер все равно не дает доступ к ответу. В чем может быть причина?

Answer 1

Вы никак не следите за состоянием запроса и пытаетесь синхронно сразу после вызова метода xhr.send(...) проверить его статус.

Естественно, вы получите не то, что ожидаете. Объекту запроса XMLHttpRequest надо установить обработчик на изменение состояния и только по готовности проверять его статус

xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) return; // 4 - DONE

    if ( xhr.status != 200 ) { 
        alert( `Ошибка ${xhr.status}: ${xhr.statusText}` ); 
    } else { 
        document.location.href = "http://localhost:8080/buildersGuide/login";
    }
}

Не забудьте передать в xhr.open() третьим аргументом true чтобы у вас продолжил исполняться код в асинхронном режиме. Детали тут

PS... Освежил свои знания по этой теме: onreadystatechange - это архаизм, поэтому можно упростить себе жизнь и реагировать на событие onload.

xhr.onload = function() {
    // Ваша проверка статусов и работа с ответом
}

БЛОГ НА HUSL

Нет доступа к ответу при кроссдоменном запросе

Ответы (1 шт):