[친구하자] Capacitor Android 앱 로그인 연동 CORS 트러블 슈팅

in ProjectDiary

Capacitor로 빌드한 Android 앱 로그인 연동 해보자! - CORS 에러 해결에 대해 다룹니다.

  • 지난 글에서는 Capacitor로 Android, iOS 앱 빌드하는 방법에 대해 다뤘다.
  • 이번 글에서는 Capacitor로 빌드한 Android 앱에서 로그인 연동을 하는 방법에 대해 다뤄보겠다.
  • 특히 CORS 에러 해결에 대해 다뤄보겠다..

    저번에 한번 여기까진 해결을 했었는데,, 다 밀고 다시하는 과정에서 까먹어서.. 이번에도 삽질을 했다..🥲 진짜 울뻔함

문제 상황

  • 일단 내 프로젝트의 상황을 말하자면
  1. React로 웹 빌드시 nginx 사용하고 있음
  2. Android 앱 빌드 (Capacitor로 감싸고 있음)
[앱/웹] → HTTPS (443) → [Nginx] → HTTP (8080) → [Spring Boot]

  • Nginx의 역할은

    1. SSL 종료
      • HTTPS를 HTTP로 변환
    2. 리버스 프록시
      • 요청을 8080포트로 전달
    3. ‼️ 문제 : OPTIONS preflight 요청이 여기서 자꾸 막혔다.🤮

    에러 이미지 에러 이미지2

증상

웹 (https://chingoohaja.app): ✅ 로그인 정상 작동
앱 (https://localhost): ❌ CORS 에러 발생

Access to fetch at 'https://silverld.site/api/v1/auth/refresh'
from origin 'https://localhost' has been blocked by CORS policy

왜 웹은 되고 앱은 안될까?

  • 웹 브라우저와 Capacitor WebView는 preflight OPTIONS 요청을 다르게 보낸다.
  1. 웹
    • Origin이 https://chingoohaja.app -> Nginx가 통과시킴
  2. 앱
    • Origin이 https:/localhost -> Nginx가 의심

      Capacitor의 URL/orign은 아래와 같다

      iOS: capacitor://localhost Android: http://localhost

  • 서버에서 Cors설정과 Security설정은 다 해놨다.
  • 그런데도 CORS 에러가 해결되지않아서 Nginx 설정 파일을 손을 댔다
    • 도메인들을 Nginx에서 동적으로 orign 반환하는 형식으로도 수정을 해봤고..
    • 모든 도메인을 다 허용도 해봤고..
  • 그런데 CORS 문제는 해결이 되지않았다..!
  • 하지만 해결방법은 생각보다 간단했다..

해결 방법

  • capacitor.config.ts파일에 capacitor의 HTTP 플러그인을 추가해준다.
plugins: {
    CapacitorHttp: {
      enabled: true,
    },
  },

왜 이게 작동하는가?

일반 fetch API:

App WebView → Browser CORS Check → ❌ Blocked

Capacitor HTTP 플러그인:

App → Native HTTP Client → 🚀 Direct Connection (CORS 우회)

네이티브 HTTP 클라이언트는 브라우저의 CORS 정책을 따르지 않고 직접 서버와 통신한다.

  • 물론 서버에서 설정을 다 해준 다음 이 코드도 추가해줘야한다.

  • 이틀간의 삽질이 끝났다..
  • 이제 리다이렉트 지옥이 시작임

핵심 교훈

문제 해결 과정에서 배운 것

  1. 레이어별 디버깅의 중요성

    • Frontend (Capacitor) → Nginx → Spring Boot 순서로 단계별 확인
    • 백엔드 로그에 아무것도 안 찍힌다 = 앞단에서 막힌 것

  2. 브라우저 vs 네이티브의 차이

    • WebView의 fetch는 브라우저 CORS 정책 따름
    • 네이티브 HTTP는 CORS 우회 가능

  3. Mixed Content 정책

    • HTTPS 페이지는 HTTP 리소스 차단
    • Nginx를 통한 HTTPS 통신 필수

주의사항

⚠️ Capacitor HTTP 플러그인 활성화 시:

  • 기존 fetch API 동작 변경 가능
  • 웹과 앱의 네트워크 동작이 달라질 수 있음
  • 충분한 테스트 필요

코드래빗의 평

참고 문헌