Блог

Очень ново реагировать, исходя из приличного понимания углового. У меня были проблемы с CORS с Angular, и я всегда решал их с помощью серверной конфигурации. К сожалению, до сих пор этого не было с React.

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

Проблема связана с публикацией в моем API с использованием выборки в React. Метод post отлично работает в Postman, но при использовании браузера (Chrome) Я получаю следующее сообщение:

 POST https://bookkeeperdb.herokuapp.com/api/books/add net::ERR_ABORTED 403

Response {type: "cors", url: "https://bookkeeperdb.herokuapp.com/api/books/add", redirected: false, status: 403, ok: false, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 403
statusText: ""
type: "cors"
url: "https://bookkeeperdb.herokuapp.com/api/books/add"
__proto__: Response
 

Изначально я получал больше информационных ошибок о том, чтобы быть более конкретным в своей конфигурации, а не использовать подстановочный знак для всего. Все мои исследования этой проблемы заставляли меня переходить от одной ошибки к другой и делали конфигурацию CORS на моем бэкэнде более конкретной. Однако я застрял в этом вопросе и не могу найти никаких соответствующих решений этой проблемы в Интернете.

Вот мой код для справки: ИНТЕРФЕЙС (отправка формы в REACT):

 handleSubmit(event) {
    event.preventDefault();
    const formFields = {
        title: this.state.bookTitle,
        synopsis: this.state.synopsisInput,
        pageCount: parseInt(this.state.pageCountInput),
        isbn: parseInt(this.state.isbnInput),
        genre_name: this.state.genreInput,
        author_first_name: 'Cormac',
        author_last_name: 'McCarthy',
        // author_first_name: this.state.authorInput.slice(0, this.state.authorInput.indexOf(" ")),
        // author_last_name: this.state.authorInput.slice(this.state.authorInput.indexOf("")),
        publisher_name: this.state.publisherInput
    }
    const headers = new Headers({
        'Content-Type' : 'application/json',
        'Authorization': `Bearer ${localStorage.token}`
    })
    console.log(`The following title was submitted: ${formFields.title}`);
    fetch("https://bookkeeperdb.herokuapp.com/api/books/add", {
        method: 'POST',
        credentials: "include",
        headers: headers,
        body: JSON.stringify(formFields)
    })
        .then((response) => console.log(response))
        .catch(error => console.log(error))
}
 

СЕРВЕРНАЯ ЧАСТЬ (corsconfig в ВЕСЕННЕЙ ЗАГРУЗКЕ):

     @Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry){
                registry.addMapping("/**")
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                        .allowedHeaders("*")
                        .allowCredentials(true)
                        .allowedOrigins("http://localhost:3000",
                                "http://localhost:3000/contribute");
            }
        };
    }
}
 

Заранее благодарю вас за помощь.

Ладно, на самом деле я просто немного поэкспериментировал, но оказалось, что включение «Носителя» в мой заголовок авторизации испортило мою аутентификацию токенов при отправке сообщения. Что ж, это было антиклиматично.