로컬환경 결제시 토스 successurl 보안에러
로컬 환경(http)은 아래와같습니다
프론트주소 : localhost:3001
서버주소 : localhost:3000
저는 successurl을 프론트서버 주소가 아닌 서버 엔드포인트로 지정 > 엔드포인트에서 최종적으로 redirect하는방식으로 구현을했는데
successurl이 서버의 api 엔드포인트로 도달을 못합니다.
successUrl:
${process.env.NEXT_PUBLIC_API_URL}/api엔드포인트
보안에러는 아래처럼나옵니다.
Unsafe attempt to initiate navigation for frame with origin 'http://localhost:3001' from frame with URL 'https://payment-gateway-sandbox.tosspayments.com/pc/direct?token=78fc63197cfb4d008e00b1c905815eb1168a953a65f84e129fd8765857347ddb&authType=KAKAOPAY&cardCode=KAKAOPAY>id=a2509148sMEkjQgsX5H44SqD4XgkkcUqxkL4Ggv'. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture
실제 서버환경은 (https) 로 프론트/서버 도메인은 같고 nginx로 포트만 3001,3000 사용합니다.6 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
운영환경에서 테스트해보니까 되네요
successUrl과 원래 페이지는 오리진이 같아야 합니다.
포트가 다르다면, 불가합니다. 물론 운영은 포트가 같아지니까 문제가 없겠네요.
FE(3001포트)에서 결제 중입니다 로딩페이지를 만든다음, BE(3000포트)에 API call하는 방식은 어떨까요?
운영서버는 nginx 리버스프록시를 사용중(3001 프론트서버, 3000 api서버)
nginx 설정상 도메인/api/ 경로로오는건 내부 3000포트 (서버포트)로 라우팅을해줘서
successUrl에 3000번(실제서버포트)를 명시하지않고
window.location.origin + "/api/... 하니까 일단 잘됩니다.
근데 로컬에선 일단 포트가달라서 안되니까 테스트가좀 불편하긴하네요
3000포트에서 결제 중입니다 로딩페이지를 만든다음, 3001포트에 API call하는 방식은 어떨까요?
-> 안되면 이렇게하려고했는데. 일단되니깐그대로갈까합니다.
보통은 "FE(3001포트)에서 결제 중입니다 로딩페이지를 만든다음, BE(3000포트)에 API call하는 방식은 어떨까요?" 이렇게 하세요
깃허브에 토스 샘플도 그렇게되어있구요.
그럼바꾸는게 낫나요? 저는 그 가이드보고 3번 엔드포인트가 가장 보앙상 좋을거같아서 그렇게한거긴한데
로딩쪽으로 다시 해봐야겟네요 사용자측면에서도 그게좀낫겟네요