Rust-Axum Web API跨域请求与Cookie设置问题求助

服务器端（Axum/Tower-HTTP） #

不能直接使用CorsLayer::permissive()，因为它默认设置Access-Control-Allow-Headers: *，这与allow_credentials(true)冲突（HTTP规范禁止同时启用凭证和通配符请求头）。需要手动构建符合规范的CORS配置：

use tower_http::cors::{Any, CorsLayer, Origin};

// 构建合规的CORS层
let cors_layer = CorsLayer::new()
    // 动态匹配请求来源，返回对应Origin到响应头（支持跨域凭证的核心要求）
    .allow_origin(Origin::predicate(|origin, _request| {
        // 若需限制特定域名，可在此添加校验逻辑；完全公开则直接返回true
        true
    }))
    // 允许携带Cookie、HTTP认证等凭证
    .allow_credentials(true)
    // 明确允许常用请求头，根据API需求调整
    .allow_headers(vec![
        "Content-Type",
        "Authorization",
        "X-Requested-With"
    ])
    // 允许所有HTTP方法，按需调整
    .allow_methods(Any);

将该层添加到Axum路由：

let app = Router::new()
    .route("/v1/auth/sign_in", post(sign_in_handler))
    // ... 其他路由配置
    .layer(cors_layer);

核心规则： #

• 启用凭证时，Access-Control-Allow-Origin不能用通配符*，必须返回与请求Origin完全匹配的值，因此用Origin::predicate动态处理。
• 请求头必须明确指定，不能使用*通配符。

客户端（JavaScript Request API） #

发起跨域请求时，必须显式设置credentials: 'include'，否则浏览器不会携带Cookie：

// 登录请求示例
fetch('http://127.0.0.1:3000/v1/auth/sign_in', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: 'your-username',
    password: 'your-password'
  }),
  // 关键：跨域请求携带凭证
  credentials: 'include'
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));

额外注意： #

• 若API设置的是HttpOnly Cookie（推荐用于安全场景），前端JS无法直接读取，但浏览器会自动在后续请求中携带。
• 跨域场景下，Cookie需设置SameSite: None，同时必须配合Secure属性（生产环境需HTTPS），否则现代浏览器会拒绝存储Cookie。

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