CORS
안녕하세요. 토스페이먼츠 결제 api 연동 테스트 중, 갑자기 CORS 이슈로 결제 창이 뜨지 않는 상황이 발생했습니다.
바로 전까지 결제 창을 띄우고 테스트 결제를 하고 있었는데 동일한 클라이언트에서 갑자기 requestPayment의 결제 창이 열리지 않네요.
successUrl, failUrl 모두 클라이언트 주소를 입력했습니다.
확인된 에러는 이미지로 첨부하였습니다.
33 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
갑자기 발생한다는 말씀 맞으실까요?
로컬환경에서 변경하신건 따로 없으실까요?
네 로컬에서 결제 요청할 때 보내던 successUrl 주소를 변경하기는 했지만 오리진은 동일하게 localhost:3000 입니다
결제창 자체가 안뜨는 것 맞으시지요?
네
이미지에 있는 토스페이먼츠 sdk 링크를 클릭하면 아래와 같이 나옵니다
그런데 지금 사용중인 클라이언트 키는 토스페이먼츠에 로그인해서 복사 후 붙여넣기 한 것이고, 이 키로 결제창을 문제 없이 띄워서 테스트를 진행했었습니다. 키는 변경한 적이 없습니다.
CORS 관련해서는 여기에 정리 해두었습니다. (https://velog.io/@tosspayments/%EA%B2%B0%EC%A0%9C%EC%B0%BD%EC%97%90%EC%84%9C-CORS-%EB%8C%80%EC%9D%91%ED%95%98%EA%B8%B0)
결제창에서 CORS 대응하기
콘솔창에서 이런 에러 만나본 적 있으시죠? 이번 아티클에서는 CORS를 알아보고 토스페이먼츠 결제창에서 CORS 에러를 만났을 때 해결하는 방법도 알아봅니다.
위 에러는 키가 잘못된 값일때 발생하는 에러이기도 해서,
키 쪽 소스코드도 다시한번 보시면 좋을것 같네요
네 우선 보내주신 글 확인해보고, 이상 있으면 다시 문의 드리겠습니다.
넵 저희가 추가로 확인 해드릴 수 있는 부분이 있다면 말씀 부탁 드립니다
서버쪽 설정이 변경되었거나 Access-Control-Allow-Origin: * 이걸 설정하신게 아닌가 확인부탁드립니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
안녕하세요. 어제 문의 드렸던 현상이 그대로 발생합니다. 키는 따로 커스텀한 게 없고 토스 예제 그대로 Tosspayments 초기화 함수에 넣고 있습니다. 서버쪽 설정이라는 게 어떤 말씀이실까요? 아직 저희 서버로는 가기도 전에 결제를 하는 창이 떠야 하는 단계에서 해당 문제가 발생합니다. 그래서 저희가 따로 header를 설정하는 일도 없습니다. 디버깅 해보니 requestPayment를 호출할 때 문제가 발생하는데 위에 보내주신 글에서 언급되는 CORS이슈는 리다이렉트 될 때 발생하는 문제입니다. 결제 요청시에 CORS가 발생하는 것에 대해서는 제가 따로 확인해봐야 할 내용이 없을까요?
브라우저에서 https://api.tosspayments.com/v1/payments/sdk 자바스크립트 다운로드가 되는지 확인부탁드립니다.
브라우저에서 해당 URL만 호출하고
{"code":"UNAUTHORIZED_KEY","message":"인증되지 않은 시크릿 키 혹은 클라이언트 키 입니다.","data":null} 라고 나오시면 다운로드는 잘 되시는거구요
네 해당 메시지 확인됩니다.
이후는 소스단에서 하나씩 확인해봐야할거같아요
음...알겠습니다 답변 감사합니다.
넵 저희도 어디가 원인인지 모르는 디버깅이 필요한 경우에는 https://docs.tosspayments.com/guides/payment/integration#%EA%B2%B0%EC%A0%9C%EC%B0%BD-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0 이런페이지의 순서대로 진행하고 있습니다. 의외로 그렇게 찾아내는 경우도 많구요
결제창 연동하기 | 토스페이먼츠 개발자센터
카드, 계좌이체, 휴대폰, 상품권 결제를 연동하는 방법을 알아보세요.
혹시 다른 PC 에서도 확인해 보실수 있을까요?
답변 감사합니다. 지금 로컬에서 작업중이라 다른 PC에서 확인해보기는 어려울 것 같습니다.
PC 브라우저의 문제일수도 있을것 같아 다른 브라우저(엣지, 크롬등) 로 테스트 해보시는 것도 좋을것 같습니다.
네 기존에 크롬 브라우저에서 테스트 하기는 했는데 다른 브라우저도 확인해보겠습니다. 그리고 확인해보니 토스 페이먼츠 클라이언트를 최초로 생성해서 결제할 때는 문제가 발생하지 않는데, 저는 이 클라이언트를 싱글톤으로 관리하려 했거든요. 기존에 윈도우 객체에 이게 등록이 된 상황에서 결제를 요청할 때 문제가 발생합니다. 제가 인스턴스 관리를 잘못 한 것인지 아니면 다른 원인이 더 있는지는 확인해봐야 할 것 같습니다. 답변 감사드립니다. 더 문의할 내용 있으면 글 남기겠습니다.
토스페이먼츠 클라이언트를 싱글톤으로 관리하신다는게 이해가 되지 않습니다. 굳이 그렇게 관리하실 필요도 없구요
앗 싱글톤으로 관리할 필요가 없나요?
네 javascript 객체라서 별도로 관리하실 필요 없습니다.
어떻게 싱글톤으로 관리하셨다는 건지 코드를 공유해주실수 있을까요?
음...너무 더러워서 좀 부끄럽지만
이렇게 처리하실 필요 없습니다. 어차피 한페이지에 2개 이상의 객체를 사용하실 일이 없어요.
그럼 Tosspayments 초기화 함수는 여러번 호출이 되어도 상관이 없나요?
지금 상품이 있으면 장바구니에 담아서 한 번 결제를 누르는 방식이 아니고 상품 상세에서 각각 결제를 하는 식으로 짜여져 있는데
상품 상세는 프론트에서 라우팅해서 페이지 이동 시키니까
모든 상품 상세에서 클라이언트 초기화를 하면 안 될 거라고 생각했어요 이게 잘못 되었다는 말씀이신 거죠?
다른 몰과 비교를 해보면 상품상세페이지가 주문서페이지의 역할을 겸하는것이군요
보통은 주문서페이지에서 자바스크립트를 사용하고 페이지 로딩시 초기화를 하시면 됩니다
주문서역할을 하는 페이지는 별도로 없으신걸까요?
네 앱스토어에서 앱 상세를 보고 결제를 누르는 것처럼 되어 있고, 내가 구매하고 싶은 앱들을 한데 모아 주문서를 작성하는 페이지는 별도로 없습니다. 기획상 해당 페이지를 만들기도 어렵고요.
넵 그렇다면 결제버튼이 존재하는 페이지(상품 상세)에서 초기화를 해주시면 됩니다.
정확한 페이지 구성은 모르겠지만, 특정 액션이 발생할때(결제가 초기화 되어야할때) 초기화를 해주시면 됩니다.
네 답변해주신 내용 토대로 다시 해보겠습니다. 감사합니다.