javascript - 从 React 应用程序向 Rocket 后端发送 POST 请求时出错

Question

尝试从单页应用程序发出 POST 请求时出现 404 错误，即使该路由在 Postman 中有效。

路线.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()
};

所有路由都在 Postman 中工作，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 的方式上吗？我找到了 one similar issue但我似乎配置正确。

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
}

这样就避免了抛出错误。