React Fetch无法访问Warp(Rust)服务器问题求助

核心问题排查 #

问题出在两个关键点：Vite代理配置的路径拼接逻辑错误，以及Warp的CORS中间件未全局处理预检请求，导致浏览器的CORS预检请求无法被正确响应，且实际业务请求未转发到Warp端点。

1. 修正Vite代理配置 #

原代理配置的target和rewrite组合容易造成路径混淆，且changeOrigin: false会导致请求头的Host保持Vite服务器端口，可能被Warp的路由逻辑忽略。调整为如下配置：

export default defineConfig({
  server: {
    proxy: {
      '/api/shop': {
        target: 'http://localhost:3030',
        changeOrigin: true,
        secure: false
      }
    }
  },
  plugins: [react()]
})

• 直接匹配/api/shop前缀，转发到Warp服务器的根地址，避免路径拼接错误
• changeOrigin: true会将请求头的Host改为Warp服务器的地址（localhost:3030），确保Warp能正确识别路由

2. 全局应用Warp CORS中间件 #

你当前仅给单个GET端点添加了CORS中间件，但浏览器发起CORS请求前会先发送OPTIONS预检请求，该请求无法被你的GET端点匹配，导致返回404，进而触发浏览器的CORS错误。需要将CORS中间件全局挂载到所有路由：

use warp::{Filter, reply::json};
use serde_json::json;

#[tokio::main]
async fn main() {
    let cors = warp::cors()
        .allow_any_origin()
        .allow_methods(vec!["GET", "POST", "PATCH", "OPTIONS", "DELETE"])
        .allow_headers(vec!["Content-Type"]);

    let available_route = warp::path!("api" / "shop" / "available")
        .and(warp::get())
        .map(|| {
            let available = true; // 替换为你的业务逻辑
            Ok(json(&json!({"available": available})))
        });

    // 将所有路由组合后统一应用CORS中间件
    let routes = available_route.with(cors);

    warp::serve(routes).run(([127, 0, 0, 1], 3030)).await;
}

这样所有请求（包括OPTIONS预检）都会经过CORS中间件处理，返回符合要求的响应头。

3. 同步React请求路径 #

确保React中的Fetch请求路径匹配代理配置：

fetch('/api/shop/available')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

验证步骤 #

• 重启Vite开发服务器和Warp服务器
• 打开浏览器Network面板，确认请求URL为http://localhost:5173/api/shop/available，且状态码为200
• 查看Warp日志，确认OPTIONS预检请求和GET业务请求均已到达服务器

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