reactjs - Rocket.rs への投稿時に React Axios POST が失敗する

Question

Axios を使用して、React アプリケーションから Rust Rocket API にポスト リクエストを送信しようとしています。問題は、API に送信された最初の要求がブロックされ、その後のすべての要求が通過し、応答データが返されることです。

これが私のAxios投稿リクエストです：

var headers = {
    "Access-Control-Allow-Origin": 'http://localhost:8000',
    "Content-Type": 'application/json'
}

axios.post("http://localhost:8000/api/register", {status: "starting"}, headers)
            .then(response => {
                if (response.status === 201 || response.status === 200) {
                  console.log("letter successfully submitted")
                  return response
                }
                throw new Error(response.error)
            })
            .catch(err => console.log(err.message))

ここに私の Cargo.toml ファイルがあります:

[package]
name = "back-end"
version = "0.1.0"
authors = [""]
edition = "2018"

[dependencies]
rocket = "0.4.6"
hyper = "0.11"
rocket_cors = "0.5.0-beta-2"
serde = { version = "1.0", feature = ["derive"]}
serde_json = "1.0"
serde_derive = "1.0"

[dependencies.rocket_contrib]
version = "0.4.6"
default-features = false
features = ["json"]

そして、ここに私のRustコードがあります:

#![feature(proc_macro_hygiene,decl_macro)]

#[macro_use] extern crate rocket;
#[macro_use] extern crate rocket_contrib;
#[macro_use] extern crate serde_derive;
#[macro_use] extern crate rocket_cors;

use rocket_contrib::json::{Json, JsonValue};
use rocket::http::Method;
use rocket::request::Form;
use rocket::response::Responder;
use rocket::{get, options, routes};
use rocket_cors::{AllowedHeaders, AllowedOrigins, Cors, CorsOptions, Guard};

#[post("/register", format="json", data= "<register>")]
fn user_create(register: Json<Response>) -> JsonValue {
    json!({
        "status": "working".to_string(),
        "result": null
    })
}

#[options("/register")]
fn ping_options<'r, 'o: 'r>() -> impl Responder<'r> {
    let cors = cors_options_all().to_cors()?;
    cors.respond_owned(|guard| guard.responder(()))
}

fn cors_options_all() -> CorsOptions {
    // You can also deserialize this
    Default::default()
}


fn cors_options() -> CorsOptions {
    //let allowed_origins = AllowedOrigins::some_exact(&["http://localhost:3000/register"]);
    let all_origins = AllowedOrigins::all();

    // You can also deserialize this
    rocket_cors::CorsOptions {
        allowed_origins: all_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()
    }
}


fn main() {
    rocket::ignite()
        .mount("/api", routes![user_create, ping_options])
        .mount("/api", rocket_cors::catch_all_options_routes())
        .manage(cors_options().to_cors().expect("To not fail"))
        .launch();
}

最後に、コンソール出力とネットワーク出力のスクリーンショットを次に示します。

アプリケーションをサーバーに配置したくありませんが、これをどのように進めるかについてはまったくわかりません。ロケットのヘッダーを設定する Hyper と呼ばれるものがあることは知っていますが、それをアプリケーションに追加する方法がわかりません。