Ошибка отправки AJAX POST-запроса с локального. html файла на localhost: 8080. CORS: «У него нет статуса HTTP ok.»

Question

Я получаю сообщение об ошибке при попытке отправить POST через AJAX из моих файлов. html и. js на localhost: 8080. При отправке запроса полная ошибка гласит: «Доступ к XMLHttpRequest по адресу« http://localhost: 8080 / contact / new-message »из источника« null »был заблокирован политикой CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: он не имеет статуса HTTP ok отличается от этой ошибки.

Есть ли способ включить статус "ОК" в заголовке? Или проблема в другом месте? Любая помощь очень ценится. Вот некоторые фрагменты кода:

My JavaScript, который выполняется как часть представления формы:

function submitMessageAJAXCall(inputName, inputEmail, inputMessage, inputRegion) {
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/contact/new-message',
        data: JSON.stringify({
            rbName: inputName,
            rbEmail: inputEmail,
            rbMessageText: inputMessage,
            rbRegionId: inputRegion
        }),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        success: function() {

            alert('Success!');
            displayThankYouMessage();

        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('Unfortunately that message did not go through.');
        }
    }); 
}

Код Java, который его получает:

@PostMapping("/new-message")
    private ResponseEntity<HttpStatus> addNewMessage(@RequestBody RBNewMessage rbNewMessage) {
        //validate message in service layer
        boolean isRequestValid = contactService.validateNewMessageRB(rbNewMessage);

        //is message is good, save it; else, return an error
        if (isRequestValid == true) {
            //create a new message
            ContactMessage message = new ContactMessage();

            //set message fields
            message.setMyName(rbNewMessage.getRbName());

            message.setMyEmail(rbNewMessage.getRbEmail());

            message.setMessageText(rbNewMessage.getRbMessageText());

            LocalDateTime timeOfMessage = LocalDateTime.now();
            LocalDateTime timeWithoutNano = timeOfMessage.withNano(0);
            message.setTimeStamp(timeWithoutNano);

            int regionId = rbNewMessage.getRbRegionId();
            Region region = regionService.getRegionById(regionId);
            message.setRegion(region);

            ContactStatus cs = contactStatService.getStatusById(1);     
            message.setContactStatus(cs);

            //save message
            contactService.save(message);

            //return success
            return new ResponseEntity<>(HttpStatus.OK);

        } else {
            //return error
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }
    }

И это пример успешного запроса почтальона:

{
    "rbName": "John Johnson",
    "rbEmail" : "JohnJohnson@Email.com",
    "rbMessageText" : "Hello there, this is my message.",
    "rbRegionId" : 5
}

Answer 1

Добавьте аннотацию @CrossOrigin (import org.springframework.web.bind.annotation.CrossOrigin) в начало класса контроллера, который обрабатывает запрос.