안녕하세요, 최근 React + Tailwind로 만든 사이트가 안드로이드 기반 카카오톡 웹브라우저에서만 열리지 않습니다.
특히 아래 링크를 알림톡을 이용해 연결하고 있는데 그냥 흰 화면만 뜨고 있습니다.
https://chatdoc.afformation.co.kr/reservation/7
ios에서는 외부 브라우저 및 인앱에서 페이지 접속 가능,
안드로이드는 외부 브라우저 접속 가능, 인앱 브라우저는 접속 불가입니다.
안녕하세요.
구성하신 서버에서 429 오류 응답하고 있어 화면구성에 필요한 리소스를 올바르게 받지 못하고 있습니다.
이는 리소스를 새로 받는 시크릿 모드에서 아래와 같이 쉽게 재현 가능합니다.
서버에 rate limiter같은 속도 제한 로직이 있는지 확인하시면 좋을것 같습니다.
악성 공격 방지를 위한 리미터가 걸려있긴 합니다만… 카카오 인앱 브라우저 내부에서 새로고침을 하면 페이지가 열리는 것을 방금 확인하였습니다.그러면 초기에 페이지 방문 시 안열리는 이유가 리미터 때문은 아닐 것으로 보이는데요
만약 리미터가 문제라면, 외부 브라우저와 달리 카카오 인웹 브라우저에서만 리미터가 걸리는 이유가 혹시 있을까요?
서비스에 처음 접근하는 사용자를 위해 _next/static 경로는 리미터에서 제외 부탁드립니다.
정황상 express 미들웨어에서 전체 경로에 대해 리미터 적용하신 것 같은데요
일반적으로 해당 경로를 포함 특별한 경우가 아니라면 프론트측 리소스에는 이렇게 엄격하게 리미터를 설정하지 않습니다.
카카오톡 인앱 브라우저는 앱이 닫히면 캐시를 초기화 합니다.
때문에 다음번 접속 시, 필요한 리소스를 모두 다시 받게 되는데요
이 때 리미터가 걸리고 있습니다. 이는 카카오톡 인앱 브라우저 뿐만아니라 비슷한 캐시 초기화 정책을 갖고있는 라인이나, 인스타 등의 인앱 브라우저에서도 동일하게 발생할 수 있습니다.
이 문제는 PC 크롬의 시크릿 모드에서 쉽게 재현 됩니다.
시크릿 모드로 테스트 해보시면 요청의 절반은 429 응답을 받습니다.
1개의 좋아요
네 리미터를 생각했던 것보다 많이 풀어야 해결되네요… 정말 감사합니다 