브랜드페이 연동 중
브랜드페이 연동중 CORS 에러가 발생하여 문의드립니다.
BE쪽에서 AccessToken이 발급된 상태이며 v2사용중입니다.
brandPay 사용하여 초기화까지는 문제없는데 addPaymentMethod 메소드 사용하면 CORS 에러 발생합니다.
아래에 에러 코드 첨부합니다
29 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
FE 쪽 URL 하고 설정하신 redirectURL 의 도메인이 다른지 확인부탁드립니다.
그리고 redirectURL 에서 accessToken 을 발급하시는지도 확인부탁드려요.
mid 정보도 남겨주시겠어요
예 FE쪽 URL과 redirectionURL의 도메인이 다릅니다.
BE쪽에서 요청을 받아 FE쪽으로 Redirection 정보를 보내주도록 설계하였습니다
mid는 cp_linkob2bpay 입니다
두개를 같이 하셔야 합니다. 저희가 저희 uI 에서 ajax 방식으로 호출하기 때문에 다르게 하시면 통신이 막혀요.
그럼 FE내에서 새로운 페이지를 개발하여 진행해야하는건가요?
네 그렇게 해주시거나 아니면 FE 쪽에서 BE 쪽 URL 을 호출할수 잇도록 cross domain 설정을 해주셔야 합니다.
가능하면 두개 도메인을 맞추는걸 권장드립니다.
FE쪽에 도메인과 일치시켜도 에러가 확인됩니다.
RedirectURL쪽에서는 accessToken을 발행하지 않고 BE에서 브랜드페이 초기화 전에 accessToken 한번 발급받습니다.
도메인 일치가 되었음에도
Access to fetch at 'https://js.tosspayments.com/v2/standard' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
해당 에러가 확인됩니다.
Access-Control-Allow-Origin 헤더를 사용하시는 페이지에 설정하신건지 확인부탁드립니다.
저희 JS 파일을 가져가지 못하도록 헤더 설정을 하신것 같아요.
다른 설정은 개별적으로 진행하지 않았습니다.
https://api.tosspayments.com/v2/brandpay/authorizations/customer-token?atms=8 429 (Too Many Requests)
Uncaught (in promise) r: 알 수 없는 에러가 발생했습니다.
at https://js.tosspayments.com/v2/standard:7:516890
at Object.otherwise (https://js.tosspayments.com/v2/standard:7:416067)
at Proxy.<anonymous> (https://js.tosspayments.com/v2/standard:7:516861)
at h (https://js.tosspayments.com/v2/standard:7:43522)
at Generator.<anonymous> (https://js.tosspayments.com/v2/standard:7:44837)
at Generator.throw (https://js.tosspayments.com/v2/standard:7:43932)
at n (https://js.tosspayments.com/v2/standard:7:950)
at u (https://js.tosspayments.com/v2/standard:7:1189)
이렇게 2가지 에러가 같이 확인됩니다
addPaymentMethod() 메서드 사용시 발생합니다
두번째 에러는 토큰발급이 안되서 발생하느 에러구요.
Access-Control-Allow-Origin는 지금 연동하신 페이지에 설정된 내용입니다.
웹서버에 자동 설정이 걸려있거나 서버 템플릿이나 프레임웍 설정에 있을거에요.
크롬 개발자 도구로 해당 페이지 띄우시면서 네트워크 탭 확인해 보세요.
이렇게 표시 되는 응답 헤더에 Access-Control-Allow-Origin 이 내용이 보이실겁니다.
requestPayment 를 호출하는 경우에는 문제없이 확인이 됩니다만 addPaymentMethod만 호출하는 경우에 문제가 있네요
위의 사진처럼 customer-token? 해당 api가 지속적으로 요청됩니다
localhost:3000 페이지 로딩시 개별적으로 설정된 Access-Control-Allow-Origin 내용은 없습니다
혹여 설정이 안되어있어서 문제가 되는걸까요?
흠.. 이상하네요. 저헤더가 없으면
Access to fetch at 'https://js.tosspayments.com/v2/standard' from origin 'http://localhost:3000/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
이에러가 날수가 없거든요.
그럼 Access-Control-Allow-Origin: * 이렇게 헤더 추가 해보실수 있을까요?
저 헤더가 없어서 나는 에러네요
No header is present : 헤더가 없다
근데 이건 Authorization 헤더가 있는경우 무시됩니다.
@flic5002 127.0.0.1:3000 에서도 동일하신지 봐주시겠어요?
React로 FE 부분을 구현중인데 해당 헤더를 임의로 추가할 수 없는걸로 알고있습니다.
해당 IP로 변경하여 진행하여도 똑같이 발생합니다
지금 혹시 tosspayments sdk를 어떻게 로딩중이세요?
npm 으로 loadTossPayments 사용하여 로딩하고있습니다
중복된 customerKey로 테스트하려고 하면 생기는 에러인듯 합니다.
이전에 사용하지 않은 새로운 CustomerKey 생성하여 시도하면 카드번호 등록 페이지까지는 전환됩니다만 카드번호 입력 후 다음 버튼 클릭시 다른 에러가 발생합니다.
에러 코드 첨부드립니다
Uncaught (in promise) rH: [BRIDGE] Request Timeout. id: _OmBSIdsgIL6C8R4QPvQ7, type: TOSSPAYMENTSREQUEST_RESPONSE, body: {"step":"TOSSPAYMENTSREQUEST","requestName":"GET_PARAMETER","payload":{"name":"customerToken"}}
한번 등록 하면 다음부터는 등록창을 사용할 수 없는건가요?
중복된 customerkey 라서 에러가 나는게 아니고 계정이 등록된 후에 에러가 발생해서 처음사용하는 customerkey 는 계정이 등록될때 까지 진행이 되는 겁니다.
우찬쓰 개발블로그
리액트(React) CORS처리
잠깐 개인적으로 리액트를 만지게 되었는데 모르던 귀찮은 에러들이 많았다. 대표적으로 교차 출처 리소스 공유(CORS)와 관련된 에러인데, 이것은 api서버쪽에서 헤더에 Access-Control-Allow-Origin을 열어주지 않는 이상 브라우저단에서 막아버리기 때문에 클라쪽에서는 ...
이런 방법을 참고해보세요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.