Проблема с получением данных публикации Axios из приложения reactjs с использованием Golang

У меня есть локально размещенная веб-страница, использующая reactjs, которая отправляет сообщение Axios на порт 9000. У меня есть сервер Golang, прослушивающий этот порт, и он получает сообщение. Затем он декодирует сообщение, но никогда не получает никаких данных. Ниже приведена часть кода, которая отправляет пост axios в приложение reactjs.

    onSubmit = (event) => {
        event.preventDefault();
        let { task } = this.state;
        console.info("printing new task title:", task);
        if (task) {
            axios
            .post(
                endpoint + "/api/task",
                {task},
                {headers: {"Content-Type": "application/x-www-form-urlencoded"}}
            )
            .then((res) => {
                this.getTasks();
                this.setState({task: ""});
                console.info(res);
            });
        }
    };

Ниже показана часть сервера golang, которая обрабатывает сообщение.

// CreateTask create task route
func CreateTask(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Context-Type", "application/x-www-form-urlencoded")
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "POST")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    var newTask listItem
    _ = json.NewDecoder(r.Body).Decode(&newTask)
    fmt.Println(newTask)
    insertOneTask(newTask)
    json.NewEncoder(w).Encode(newTask)
}

Ниже приведена структура listItem.

type listItem struct {
ID        primitive.ObjectID `json:"_id,omitempty" bson:"_id,omitempty"`
Title     string             `json:"title,omitempty"`
Completed bool               `json:"completed,omitempty"`
}

Я пытался переименовать его в заголовок вместо задачи и просто передать статическую переменную, но безрезультатно.

В консоли он правильно печатает введенный текст, но когда консоль выводит ответ axios от сервера golang, его ответ никогда не включает имя задачи.

Это пример того, как должна выглядеть часть данных ответа от сервера golang: data: {_id: '000000000000000000000000', title:'Test'}.

Он выводит только это data: {_id: '000000000000000000000000'}

Вывод терминала golang после получения сообщения выглядит следующим образом:

{ObjectID("000000000000000000000000")  false}
Inserted a Single Record  ObjectID("63decde2a336b8e7cdc2b865")

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для отладки такого рода проблем рекомендуется использовать DevTools.

На снимке экрана показано, что полезная нагрузка закодирована в форме URL-адреса. Но сервер пытается прочитать его с помощью декодера json (_ = json.NewDecoder(r.Body).Decode(&newTask)). Если вы не проигнорируете ошибку от Decode, она должна сообщить, что содержимое не является допустимым json. Чтобы решить эту проблему, просто удалите {headers: {"Content-Type": "application/x-www-form-urlencoded"}} из client/src/To-Do-List.js.

После изменения полезная нагрузка будет:


Другие ошибки:

1. Context-Type заголовок не соответствует содержанию ответа

Функция CreateTask в go-server/main.go имеет и другую проблему. Ответ закодирован как json:

json.NewEncoder(w).Encode(newTask)

Что противоречит:

    w.Header().Set("Context-Type", "application/x-www-form-urlencoded")

Заголовок следует заменить на:

    w.Header().Set("Context-Type", "application/json")

2. CORS настроен неправильно

    r.HandleFunc("/api/task", GetAllTasks).Methods("GET", "OPTIONS")
    r.HandleFunc("/api/task", CreateTask).Methods("POST", "OPTIONS")

Запросы OPTIONS будут обрабатываться GetAllTasks. Чтобы разрешить использование заголовка Content-Type в POST-запросе, в GetAllTasks необходимо добавить следующую строку:

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")

А так как CreateTask не обрабатывает запрос OPTIONS, следующие строки можно удалить:

    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Methods", "POST")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")

Я попробовал исправление выше, но оно просто выдавало новые ошибки и даже не позволяло отправить запрос на 9000. В этом файле показаны 2 ошибки, которые возникают после внесения изменений.

jonathan anders 06.02.2023 02:17

Это другая ошибка. Сообщение об ошибке достаточно ясно. Доступ has been blocked by CORS policy. Я также обновил ответ, чтобы исправить эти ошибки.

Zeke Lu 06.02.2023 02:48

Это сработало, спасибо! Я ценю быстрые ответы и усилия, вложенные в помощь :)

jonathan anders 06.02.2023 21:38

Другие вопросы по теме