从 React 应用程序向 Rocket 后端发送 POST 请求时出错 returns 失败

Question

我正在用 Rocket 作为后端，React 作为前端编写一个简单的 Web。

登录页面的代码片段如下所示

#[post("/login", data = "<data>")]
pub fn login(
    conn: DbConn,
    mut cookies: Cookies<'_>,
    data: Form<LoginForm>,
) -> Result<JsonValue, NotFound<String>> {
    let valid_account = match Account::find_by_email(&*conn, data.email.as_str()) {
        Ok(account) => {
            if account.password == data.password {
                account
            } else {
                return Err(NotFound("Incorrect email or password!".to_string()));
            }
        }
        Err(_) => return Err(NotFound("Incorrect email or password!".to_string())),
    };

    cookies.add_private(
        Cookie::build(AUTH_COOKIE, valid_account.id.to_string())
            .same_site(rocket::http::SameSite::Strict)
            .finish(),
    );
    Ok(json!({
        "email": valid_account.email,
        "name": valid_account.name,
    }))
}

main.rs

代码

fn main() {
    rocket::ignite()
        .mount("/", routes![
                account::login::login,
            ],
        )
        .register(catchers![errors::unauthorized])
        .attach(rocket_cors::CorsOptions::default().to_cors().unwrap())
        .manage(establish_connection())
        .launch();
}

以及尝试发送 post 请求时的 React 代码

export const postForm = async (
  pathUrl: string,
  postInfo: { [name: string]: any }
) => {
  let axiosConfig = {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Access-Control-Allow-Origin': '*',
    },
  };
  try {
    const response = await axios.post(
      baseUrl + pathUrl,
      querystringify.stringify(postInfo),
      axiosConfig
    );
    return response.data as CurrentUser;
  } catch (err) {
    console.log(err);
    return Promise.reject(err.response);
  }
};

如果我输入正确的电子邮件和密码，代码可以正常工作。但是，如果我输入错误的凭据，它无法捕获错误消息。登录成功和登录失败的火箭日志是一样的

OPTIONS /login:
    => Error: No matching routes for OPTIONS /login.
    => Warning: Responding with 404 Not Found catcher.
    => CORS Fairing: Turned missing route OPTIONS /login into an OPTIONS pre-flight request
    => Response succeeded.
POST /login application/x-www-form-urlencoded:
    => Matched: POST /login (login)
    => Outcome: Success
    => Response succeeded.

我在浏览器中捕获的错误日志是 Error: "Request failed with status code 404"，这不是 post 函数中硬编码的预期错误消息。

我认为这与 Rocket 内部处理的 Option 或 preflight 有关，这可能是出于安全目的。但是我怎样才能抑制系统错误并让我的代码接管呢？

我已经阅读了之前的 SO post，例如 and GitHub issues like https://github.com/SergioBenitez/Rocket/issues/25。仍然找不到我的问题的答案。

提前致谢！

Answer 1

显然，由于不熟悉 Rocket 和 React，我在这里犯了几个错误。
在这里列出以防有人犯类似错误。

404 状态代码来自第一个代码片段 Result<JsonValue, NotFound<String>>。因此，如果我们将 return 类型写为 Result<JsonValue, Unauthorized<String>>，它将 return 401 视为未经授权的用户。

其次，axios只接收json类型，无法解析字符串（如有错误请指正）。所以我们需要将服务器中的 return 类型更改为 Result<JsonValue, Unauthorized<JsonValue>>.

从 React 应用程序向 Rocket 后端发送 POST 请求时出错 returns 失败

Error when sending POST request from React app to Rocket backend returns failure

rust

preflight

reactjs

rust-rocket