Ошибка отправки запроса POST из приложения React в серверную часть Rocket

Question

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

routes.rs

#[post("/letters", format = "application/json", data = "<new_letter>")]
fn write_letter(new_letter: Json<NewLetter>, conn: DbConn) -> Json<Value> {
    Json(json!({
        "status": Letter::write(new_letter.into_inner(), &conn),
        "result": null
    }))

}

Я настроил main.rs, чтобы учесть CORS

let (allowed_origins, failed_origins) = AllowedOrigins::some(&["http://localhost:3000"]);
let options = rocket_cors::Cors {
    allowed_origins: allowed_origins,
    allowed_methods: vec![Method::Get, Method::Put, Method::Post, Method::Delete]
        .into_iter()
        .map(From::from)
        .collect(),
    allowed_headers: AllowedHeaders::all(),
    allow_credentials: true,
    ..Default::default()
};

Все маршруты работают в Почтальоне, и запросы GET работают из моего приложения. Однако, когда я пытаюсь сделать POST-запрос из моего приложения, я получаю 404 на внешнем интерфейсе, а из моего бэкэнда регистрируется следующее:

OPTIONS /api/letters:
=> Error: No matching routes for OPTIONS /api/letters.
=> Warning: Responding with 404 Not Found catcher.
=> CORS Fairing: Turned missing route OPTIONS /api/letters into an OPTIONS pre-flight request
=> Response succeeded.

И вот мой интерфейс для справки:

writeLetter: (letter) => axios.post(`${base_url}/api/letters`, letter)
  .then(res => {
     if (res.status == 201) {
      console.log("letter successfully submitted")
      return res
    }
    throw new Error(res.error)
  }),

Проблема в том, как я реализую Axios или rocket_cors? Я обнаружил одну подобную проблему, но, похоже, я правильно ее настраиваю.

Answer 1

Я думаю, что я был сбит с толку тем, как регистрируется маршрут OPTIONS. Я предположил, что это отправляло ответ 404 переднему концу, потому что линия Warning: Responding with 404 Not Found catcher но две строчки под ним сказали Response succeeded поэтому я копнул немного глубже в DevTools.

OPTIONS отправлял обратно ответ 200, и так как я учитывал только созданный ответ 201, он выдал ошибку.

Я обновил свой API до

if (res.status == 201 || res.status == 200) {
  console.log("letter successfully submitted")
  return res
}

и это предотвратило появление ошибки.