브라우저 Ajax 요청의 네트워크 흐름: CORS, OPTIONS, DNS까지 정리

웹 서비스를 운영하다 보면 이런 상황을 자주 만난다.

• “curl로는 되는데 브라우저에서는 안 됩니다”
• “OPTIONS 요청이 왜 이렇게 많이 오죠?”
• “배포했는데 데이터가 바뀌지 않습니다”
• “로그인은 성공했는데 다음 요청에서 세션이 사라집니다”

이 문제들의 출발점은 대부분 Ajax 요청의 동작 구조에 있다.

이 글에서는 Ajax의 개념이 아니라,

서비스 운영과 장애 대응에 필요한 핵심 동작 흐름을 정리한다.

---

1. Ajax 요청은 어디서 시작되는가?

Ajax는 단순히 말하면:

브라우저 안의 JavaScript가 서버로 HTTP 요청을 보내는 방식

예:

fetch("/api/order")

중요한 점은:

• 요청은 서버가 아니라 브라우저에서 시작된다
• 브라우저는 일반 HTTP 클라이언트와 다르게 강한 보안 정책을 적용한다

---

2. Ajax 요청의 실제 흐름

실제 요청은 다음 단계를 거친다:

브라우저(JS 실행)
   ↓fetch / axios
   ↓
브라우저 보안 검사 (CORS 등)
   ↓
(필요 시) PreflightOPTIONS
   ↓
DNS 조회
   ↓
TCP 연결 / TLS 협상
   ↓Load Balancer / Ingress / WAF
   ↓
애플리케이션 서버
   ↓
응답
   ↓
브라우저 캐시 / 쿠키 처리

이 중 어느 단계에서든 문제가 발생할 수 있다.

---

3. fetch는 무엇을 하는가?

fetch는 브라우저가 HTTP 요청을 만들도록 하는 API다.

요청 정보는 두 곳에서 만들어진다.

1) 코드에서 지정

• URL
• Method
• Headers
• Body

2) 브라우저가 자동으로 추가

• Origin
• Referer
• Cookie (조건 충족 시)
• User-Agent

이 차이 때문에 이런 현상이 발생한다:

curl은 되는데 브라우저는 안 된다

curl은 브라우저 보안 정책을 따르지 않기 때문이다.

---

4. Preflight OPTIONS는 무엇인가?

Preflight는:

브라우저가 실제 요청을 보내기 전에 “이 요청을 보내도 되는지” 확인하는 절차

특정 조건에서 브라우저는 먼저:

OPTIONS /api/order

요청을 보낸다.

서버가 적절한 CORS 헤더로 응답하지 않으면

실제 요청은 아예 전송되지 않는다.

---

일반 OPTIONS와의 차이

구분 일반 OPTIONS Preflight OPTIONS

목적	메서드 확인	CORS 허용 확인
발생 주체	클라이언트	브라우저 자동
운영 영향	낮음	매우 큼

---

5. CORS는 왜 발생하는가?

CORS는 서버 기능이 아니다.

브라우저 보안 정책이다.

출처(origin)가 다르면 기본적으로 차단된다:

frontend.com → api.backend.com

이 경우 서버가 다음과 같은 헤더를 내려줘야 한다:

Access-Control-Allow-Origin

curl은 이 정책을 적용하지 않는다.

그래서 curl은 되는데 브라우저는 안 되는 상황이 발생한다.

---

6. DNS는 누가 조회하는가?

DNS 조회는:

요청을 보내는 쪽(브라우저/OS)이 수행한다.

흐름:

브라우저
  ↓
OS 네트워크 스택
  ↓
DNS Resolver

이 때문에 발생하는 문제:

• 특정 PC에서만 접속 불가
• VPN 환경에서만 실패
• 내부 DNS 설정 문제

---

7. 자주 발생하는 운영 이슈 3가지

1) curl은 되는데 브라우저는 안 됨

주요 원인:

• CORS
• Mixed Content (HTTPS → HTTP 호출)
• 쿠키 정책(SameSite)

---

2) OPTIONS 403

주요 원인:

• 인증 필터가 OPTIONS까지 검사
• Ingress에서 OPTIONS 미허용
• CORS 헤더 미설정

---

3) 로그인 후 쿠키가 안 붙음

주요 원인:

• SameSite=Lax/Strict
• Secure 설정 (HTTPS 필수)
• 도메인 불일치
• fetch에서 credentials 옵션 미설정

---

8. Ajax와 캐시

Ajax 응답도 캐시 대상이다.

개입 위치:

1. 브라우저 캐시
2. Service Worker
3. CDN
4. API Gateway 캐시

이 때문에:

배포했는데 화면/데이터가 안 바뀐다

같은 현상이 발생할 수 있다.

---

9. 운영자가 반드시 이해해야 할 질문

Ajax를 깊이 코딩할 필요는 없다.

하지만 아래 질문에 답할 수 있어야 한다:

1. 요청은 어디에서 시작되는가?
2. 브라우저는 어떤 보안 정책을 적용하는가?
3. OPTIONS 요청은 왜 발생하는가?
4. 인증은 어디에서 검증되는가?
5. DNS는 어디에서 해결되는가?
6. 캐시는 어디에서 개입되는가?

---

마무리

Ajax는 단순한 프론트 기술이 아니다.

• CORS 정책
• 인증 구조
• TLS 설정
• 캐시 전략
• DNS 구성

과 직접 연결되어 있는 서비스 운영의 핵심 지점이다.

Ajax의 네트워크 흐름을 이해하면

브라우저 기반 장애의 대부분을 구조적으로 설명할 수 있다.