[실무] window.location.href vs API 호출 차이 (SSO 구현하며)

1. 문제 상황

SSO 연동을 하면서 이런 고민이 있었다.

• 로그인 요청을 API로 처리할지
• 아니면 window.location.href로 리다이렉트할지

처음에는 그냥 API로 처리하려고 했다.

axios.get("/sso/request")

그런데 이 방식으로는 해결이 안 되는 문제가 있었다.

 

2. 결론 먼저

SSO는 대부분 API 호출로 처리하는 게 아니라
브라우저 리다이렉트(window.location.href)로 처리한다.

window.location.href = "/sso/request";

이게 왜 필요한지 아래에서 정리해본다.

 

3. API 호출 방식이 안 되는 이유

axios로 요청하면 이런 흐름이다.

• JS 코드 → 서버 요청 → 응답(JSON 등)

문제는 SSO는 여기서 끝나는 게 아니라
외부 인증 서버로 이동해야 한다는 점이다.

예를 들어 서버에서 이렇게 응답을 준다고 해도

{
  "redirectUrl": "https://sso-server/login"
}

프론트에서 다시 이동을 해줘야 한다.

window.location.href = response.redirectUrl;

즉, 한 번 더 처리해야 한다.

---

4. window.location.href 방식

처음부터 브라우저를 이동시키는 방식이다.

window.location.href = "/sso/request";

이렇게 하면 흐름이 단순해진다.

1. 브라우저가 /sso/request 호출
2. 서버에서 SSO 서버로 redirect
3. 인증 완료 후 다시 돌아옴

-> 중간에 JS 개입이 없다

---

5. 실제로 겪은 문제

이걸 API로 처리하려다가 막혔던 부분이 있었다.

1) 도메인 문제

• 프록시 환경 (Apache)
• 여러 도메인 사용

이 상태에서 API 호출하면
사용자가 어떤 도메인으로 들어왔는지 서버가 알기 어려웠다

반면 window.location.href는

👉 브라우저 기준으로 이동하기 때문에
👉 원래 도메인 흐름이 자연스럽게 유지된다

---

2) 쿠키 / 세션 문제

SSO는 보통 쿠키 기반 인증을 사용한다.

API 호출로 처리하면

• 쿠키 전달 안 되는 경우 발생
• SameSite 정책 영향 받음

반면 리다이렉트 방식은

👉 브라우저가 직접 이동하기 때문에
👉 쿠키 흐름이 정상적으로 유지된다

---

3) 인증 흐름 깨짐

SSO는 기본적으로

• 요청
• 인증 서버 이동
• 콜백

이 흐름인데

API 호출로 중간에 끼면
흐름이 꼬이는 경우가 있었다.

---

6. 언제 API 방식 써도 되나

완전히 안 되는 건 아니다.

• 토큰 기반 인증 (JWT)
• SPA 내부 인증 처리

이 경우에는 API 호출로 처리해도 된다.

하지만

👉 외부 SSO (SAML, OAuth redirect 기반)는
👉 거의 무조건 redirect 방식 사용

---

7. 정리

두 방식 차이는 이거 하나로 정리된다.

API 호출:

• JS → 서버 → 응답 처리 필요
• 흐름 제어를 직접 해야 함

window.location.href:

• 브라우저가 이동
• 인증 흐름이 자연스럽게 이어짐

---

8. 결론

SSO는 “API로 로그인 처리”가 아니라
“브라우저 이동 기반 인증 흐름”이다.

그래서 대부분 구현이

window.location.href = "/sso/request";

이렇게 끝난다.