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

Posted 2023-03-03

【中文标题】从 React 应用程序向 Rocket 后端发送 POST 请求时出错返回失败

【英文标题】：Error when sending POST request from React app to Rocket backend returns failure

【发布时间】：2020-10-15 15:29:44

【问题描述】：

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

登录页面的代码 sn-p 如下所示

#[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);
  
;

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

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 帖子，例如 state undefined: while sending post request from react app 和 GitHub 问题，例如 https://github.com/SergioBenitez/Rocket/issues/25。仍然找不到我的问题的答案。

提前致谢！

【参考方案1】：

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

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

其次，axios 只接收 json 类型，无法解析字符串（如果我错了，请纠正我）。所以我们需要将server中的返回类型改为Result<JsonValue, Unauthorized<JsonValue>>。