Spring boot отклоняет тело при отправке на сайте, но не с почтальоном

Question

Эй, я работаю с весенней загрузкой, и происходит что-то странное. Я хочу отправить запрос на мой сервер Springboot, я успешен, когда я делаю это через почтальона, но не удается, когда я делаю это через мой сайт. Я пытался изменить его на разные HTTP-запросы и модели данных, но я получаю ту же ошибку. Кажется, нет никаких отличий в телах, которые я отправил, из того, что я видел и испытывал. Ошибка трассировки стека находится в веб-запросе (полностью вниз).

Код моего контроллера

    @CrossOrigin(maxAge = 3600)
    @RequestMapping(value = "/auth", method = RequestMethod.POST)
    @ResponseBody
public ResponseEntity<?> authenticate(@RequestBody Map<String, String> body) {
    System.out.println(body);
    ResponseModel responseModel;
    ProfileResource login = new ProfileResource();
    login.setUsername(body.get("Username"));
    login.setPassword(body.get("Password"));

    // other code..

    responseModel.setData(login);
    return new ResponseEntity<>(responseModel, HttpStatus.ACCEPTED);
}

Мой код JS:

$(document).ready(function() {
$("#LoginButtonID").click(function(){
    if($('#LoginButtonID').is(':visible')) {
        var link  = "http://localhost:9024/login/auth";
        var body = "{"+
            "\"Username\":\""+document.getElementById("UserNameID").value+"\", " +
            "\"Password\":\""+document.getElementById("PasswordID").value+"\"" +
            "}";
        console.log(body);
        sendRequest(link,'POST',body);
        console.log(data)
        if(data.response.toString()===("valid and successful")){
            localStorage.setItem("username",document.getElementById("UserNameID").value);
            window.location.href = "../html/UserPages/Welcome.html";
        }else if(data.response.toString()===("failed to authenticate")){
            alert("failed to login");
        }
    }
})
});

function sendRequest(link, type, body) {
    // http request sent to the server in hopes that it will take it
    var xhr = new XMLHttpRequest();
    xhr.open(type, link, false);
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

    xhr.onreadystatechange = function () {
        // once the request was sent and received we then make use of the response
        if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 202 ) {
            data = JSON.parse(xhr.responseText);
            console.log("data: " + data.response.toString());
        }else if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 401 ){
            console.log("Auth failed")
            data = JSON.parse(xhr.responseText);            }
    }
    xhr.send(JSON.stringify(body));
}

Ответ почтальона:

{
"successful": true,
"responseCode": 0,
"response": "valid and successful",
"data": {
    "name": null,
    "password": null,
    "username": "a",
    "email": null
}
}
console (IDE) output:
{Username=a, Password=a}

Веб-запрос

login.js:12 {"Username":"a", "Password":"a"}
login.js:47 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
sendRequest @ login.js:47
(anonymous) @ login.js:13
dispatch @ jquery-3.1.1.js:5201
elemData.handle @ jquery-3.1.1.js:5009
login.js:65 POST http://localhost:9024/login/auth 500
sendRequest @ login.js:65
(anonymous) @ login.js:13
dispatch @ jquery-3.1.1.js:5201
elemData.handle @ jquery-3.1.1.js:5009
login.js:14 undefined
login.js:15 Uncaught TypeError: Cannot read property 'response' of undefined
    at HTMLButtonElement.<anonymous> (login.js:15)
    at HTMLButtonElement.dispatch (jquery-3.1.1.js:5201)
    at HTMLButtonElement.elemData.handle (jquery-3.1.1.js:5009)

    Console (IDE) output:
2019-10-06 04:36:56.730  WARN 24332 --- [nio-9024-exec-4] .m.m.a.ExceptionHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot construct instance of `java.util.LinkedHashMap` (although at least one Creator exists): no String-argument constructor/factory method to deserialize from String value ('{"Username":"a", "Password":"a"}'); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot construct instance of `java.util.LinkedHashMap` (although at least one Creator exists): no String-argument constructor/factory method to deserialize from String value ('{"Username":"a", "Password":"a"}')
 at [Source: (PushbackInputStream); line: 1, column: 1]]

Answer 1

Проверьте, содержит ли ваш ответ JSON поле response. Согласно журналам, полученный ответ {"Username":"a", "Password":"a"}, тогда как в вашем коде JS вы делаете data.response.toString(), поскольку ответ не определен. Вы получаете Uncaught TypeError: Cannot read property 'response' of undefined ошибку.

Я попробовал следующий код, он работал в моей системе:

$(document).ready(function() {
    $("#LoginButtonID").click(function(){
            var link  = "http://localhost:9024/login/auth";
            var body = "{"+
                "\"Username\":\""+document.getElementById("UserNameID").value+"\", " +
                "\"Password\":\""+document.getElementById("PasswordID").value+"\"" +
                "}";
            sendRequest(link,'POST',body);

            if(data.response.toString()===("valid and successful")){
                localStorage.setItem("username",document.getElementById("UserNameID").value);
                alert("done!")
            }else if(data.response.toString()===("failed to authenticate")){
                alert("failed to login");
            }
    })
});

function sendRequest(link, type, body) {
    var xhr = new XMLHttpRequest();
    xhr.open(type, link, false);
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 202 ) {
            data = JSON.parse(xhr.responseText);
        }else if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 401 ){
            data = JSON.parse(xhr.responseText);            }
    }
    xhr.send(body);
}

Код контроллера:

@CrossOrigin(maxAge = 3600)
@PostMapping("auth")
@ResponseBody
public ResponseEntity<?> authenticate(@RequestBody Map<String, String> body) {
    // sending some response for the sake of testing
    body.put ("response","valid and successful");
    return new ResponseEntity<>(body, HttpStatus.ACCEPTED);
}

Answer 2

Вам необходимо использовать асинхронный запрос. Вы уже используете jquery, он предоставляет эту функциональность в $. Ajax () , нет необходимости использовать встроенный в javascript XMLHttpRequest.