如何在WebAssembly中使用web-sys发送带JSON请求体的POST请求

要在现有GET请求代码基础上实现带JSON的POST请求，除了修改请求方法为POST，还需要完成请求体构造、请求头设置两步操作，具体实现如下：

核心步骤 #

• 定义请求体对应的数据结构，序列化为JSON字符串
• 将JSON字符串转换为WASM/JS交互可识别的JsValue类型，设置到请求配置的body字段
• 新增Content-Type: application/json请求头，告知服务端请求体格式

完整代码示例 #

首先确保依赖配置正确，Cargo.toml中相关依赖配置参考：

[dependencies]
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
web-sys = { version = "0.3", features = [
    "Request",
    "RequestInit",
    "RequestCredentials",
    "Headers",
    "Window",
    "console",
] }

请求逻辑代码：

use serde::Serialize;
use wasm_bindgen::JsValue;
use wasm_bindgen_futures::JsFuture;
use web_sys::{Request, RequestInit, RequestCredentials, Headers, window};

// 自定义请求体结构，和你要传的JSON字段对应
#[derive(Serialize)]
struct BookPayload {
    title: String,
    author: String,
    publish_year: u16,
}

// 你的请求函数
async fn post_book() {
    // 构造要提交的业务数据
    let payload = BookPayload {
        title: "WebAssembly开发指南".to_string(),
        author: "技术作者".to_string(),
        publish_year: 2024,
    };
    // 序列化为JSON字符串
    let json_str = serde_json::to_string(&payload).unwrap();

    let mut opts = RequestInit::new();
    opts.method("POST");
    opts.credentials(RequestCredentials::Include);
    // 设置JSON请求体
    opts.body(Some(&JsValue::from_str(&json_str)));

    // 设置请求头
    let req_headers = Headers::new().unwrap();
    req_headers.append("Content-Type", "application/json").unwrap();
    opts.headers(&req_headers);

    let request = Request::new_with_str_and_init(
        "http://localhost:8080/api/v1/books",
        &opts
    ).unwrap();

    match window() {
        Some(win) => {
            let fetch_result = JsFuture::from(win.fetch_with_request(&request)).await;
            match fetch_result {
                Ok(resp) => web_sys::console::log_1(&format!("请求成功: {:?}", resp).into()),
                Err(err) => web_sys::console::log_1(&format!("请求失败: {:?}", err).into()),
            }
        },
        None => web_sys::console::log_1(&"获取window对象失败".into()),
    }
}

注意事项 #

• 如果服务端配置了跨域校验，需要在CORS配置中允许Content-Type请求头，否则浏览器会拦截请求
• 序列化JSON、构造请求头等操作的unwrap()在生产环境建议替换为自定义错误处理，避免panic
• 如果不需要携带跨域cookie，可以去掉credentials相关配置

内容的提问来源于stack exchange，提问作者obei