C.W.K.
Stream
Lesson 06 of 06 · published

웹뷰가 네 헤더를 못 읽을 때

~13 min · tauri, cors, webview, networking

Level 0웹 관광객
0 XP0/56 lessons0/13 achievements
0/100 XP to next level100 XP to go0% complete
"네 프론트엔드는 여전히 브라우저야. fetch를 부르는 순간, 잊고 있던 브라우저 규칙이 전부 돌아와 — CORS 포함."

함정: 웹뷰의 fetch는 브라우저 fetch야

잊기 쉽지만, 네 UI를 돌리는 웹뷰는 브라우저고, 프론트엔드의 fetch()는 브라우저 보안을 따라 — CORS 포함. 구체적이고 미치게 하는 구석: JavaScript는 서버가 Access-Control-Expose-Headers로 명시적으로 허락한 응답 헤더만 읽을 수 있어. 요청은 성공하고, body는 멀쩡한데, response.headers.get("X-My-Custom")null을 반환해 — 헤더가 없어서가 아니라, 서버가 동의 안 하면 브라우저가 JS한테 숨겨서야. 이게 Cinder의 디버깅 세션 하나를 잡아먹었어: 커스텀 헤더가 보내지고 있었는데, 웹뷰가 그냥 안 보여줬어.

고침 1: 헤더를 노출해 (서버를 통제한다면)

서버가 네 거면 헤더 이름을 Access-Control-Expose-Headers에 추가해. 이제 웹뷰의 fetch가 그걸 읽을 수 있어. API가 네 통제 하면 이게 올바른 고침이야 — 평범한 CORS 설정이고, cross-origin API를 치는 어떤 웹 앱이든 하듯이.

고침 2: Rust를 거쳐가 (탈출구)

더 깊은 수: 웹뷰에서 HTTP 호출을 아예 안 해. Rust에서 해 — command 안에서 reqwest나 공식 tauri-plugin-http로 — 그리고 데이터(나 네가 신경 쓰는 헤더)를 프론트엔드에 반환해. Rust 코어는 브라우저가 아니야. CORS가 안 걸려. 이건 헤더 문제를 비껴가는 동시에 API 키 같은 비밀을 웹뷰 밖에 둬. 프론트엔드 네트워킹이 CORS로 너랑 싸우면, 그 요청이 대신 Rust에 속하는지 물어봐.

Code

증상과 서버 쪽 고침·text
// 헤더를 노출 안 한 서버 응답:
HTTP/1.1 200 OK
X-Request-Id: abc123
Access-Control-Allow-Origin: *

// 웹뷰에서:
const res = await fetch(url);
res.headers.get("X-Request-Id"); // → null  (헤더는 있는데 JS가 못 봄)

// expose_headers 있는 서버 응답:
Access-Control-Expose-Headers: X-Request-Id
// 이제 res.headers.get("X-Request-Id") → "abc123"
코어를 거쳐 CORS 우회·rust
// 고침 2: Rust에서 요청 — CORS 없음, 헤더 완전 접근.
#[tauri::command]
async fn fetch_with_id(url: String) -> Result<(String, Option<String>), String> {
    let res = reqwest::get(&url).await.map_err(|e| e.to_string())?;
    let request_id = res
        .headers()
        .get("x-request-id")
        .and_then(|v| v.to_str().ok())
        .map(String::from);
    let body = res.text().await.map_err(|e| e.to_string())?;
    Ok((body, request_id)) // Rust가 자유롭게 읽은 헤더를 웹뷰에 건넴
}

External links

Exercise

커스텀 응답 헤더(X-Demo: hi)를 반환하는 작은 로컬 서버를 아무거나 띄워. Tauri 프론트엔드에서 fetch하고 그 헤더를 읽어봐 — expose-headers 없이는 null인 걸 관찰해. 그다음 서버에 Access-Control-Expose-Headers를 추가하거나(또는 헤더를 읽어 반환하는 Rust command를 써) 이제 값이 보이는지 확인해. 다신 이걸로 안 놀랄 거야.
Hint
Access-Control-Expose-Headers: X-Demo 없으면, 헤더가 보내졌어도 웹뷰에서 response.headers.get('X-Demo')는 null이야. Rust 경로는 CORS를 아예 비껴가 — reqwest는 어떤 헤더든 읽어.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.