У меня есть локально размещенная веб-страница, использующая 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")
Кажется, что атрибут задачи указан как '' в новом файле . Моя проблема в том, что новая задача не имеет введенного текста с веб-страницы. Если вам нужно больше кода, он ниже
Для отладки такого рода проблем рекомендуется использовать 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
.
После изменения полезная нагрузка будет:
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")
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")
Это другая ошибка. Сообщение об ошибке достаточно ясно. Доступ has been blocked by CORS policy
. Я также обновил ответ, чтобы исправить эти ошибки.
Это сработало, спасибо! Я ценю быстрые ответы и усилия, вложенные в помощь :)
Я попробовал исправление выше, но оно просто выдавало новые ошибки и даже не позволяло отправить запрос на 9000. В этом файле показаны 2 ошибки, которые возникают после внесения изменений.