브랜드 페이 카드 등록 클릭 시, 404 에러
안녕하세요. 토스 브랜드 페이 결제창에서 카드 등록 클릭 시
POST https://api.tosspayments.com/v1/brandpay/clients/authorizations 404 (Not Found)
오류가 납니다.
해결 방안에 대해서 문의드립니다.
감사합니다.
54 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
안녕하세요 메일로 동일 문의주셨죠?
네 맞습니다.
console에러만찍히고 등록까지는 정상되시죠?
아뇨 카드 번호 등록도 안됩니다.
영상으로 1번 제공 가능할까요?
네 잠시만요
사용한 customerKey 확인 부탁드려요
입니다.
확인후 회신드릴게요
크롬 extention을 끄거나 타브라우저에서 해보실 수 있으세요
해당 404에러는 비회원일 경우 발생하는 일반적에러라, 카드등록이 안되는건 다른 이슈일 것 같아요
사파리 브라우저로 해봤는데 동작 안되고 다른 에러가 나오네요
아 같은 오류군요
사파리에서도 동일하게 카드번호 입력이 안되나요?
네, 입력 안됩니다.
혹시 저희가 확인가능한사이트가 있을까요? '
재현이 안되어서요
네, 가계정 만들어서 링크 보내드리겠습니다.
localhost로는 외부접속이 안됩니다.
Localhost 말고 외부접속 가능하게 링크 만들어주시겠어요?
아 잘못보냈습니다
확인했습니다.
계정및주소는 지워주셔도됩니다.
제가 지웠어요
넵
@tdb
material ui에서 기본적으로 모달이 마운트되어있는 동안은 포커스를 해당 모달로 강제하고 있는걸로 보여요.
그부분확인해보시기 바랍니다.
material ui의 disableEnforceFocus 를 true 로 주어서 포커스를 강제하는 옵션을 끄면 될 것 같아요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
네, disableEnforceFocus 를 true 바꾸니 해당 오류는 해결했습니다.
하지만, 카드 등록 후
Failed to construct 'Headers': String contains non ISO-8859-1 code point.
오류가 납니다.
이건 redirectUrl에서 Token발급이 안될 때 이슈인데요
redirectUrl 세팅하고, Token발급 api는 호출중이실까요?
클라이언트 코드의 리다이렉션 주소는
https://dev-api.textiledesignbank.com/v1/web/toss/test
인데, 서버 요청이 안옵니다.
useEffect(() => {
async function fetchPaymentWidgets() {
const tossPayments = await loadTossPayments(clientKey);
console.log('tset:' ,
Textiledesignbank-${user_id});
const widgets = tossPayments.widgets({ customerKey: Textiledesignbank-${user_id},
brandpay: {
redirectUrl: https://dev-api.textiledesignbank.com/v1/web/toss/test // 리다이렉트 URL 설정
}
});
setWidgets(widgets);
}
fetchPaymentWidgets();
}, [clientKey]);
호출시 사용한 customerKey알려주세요
Textiledesignbank-253
localhost에서 실행중이시죠?
로컬이랑 테섭 둘다 적용 중입니다.
cors때문에 안될거에요
지금 referer는 localhost인데
위 url호출중이네요
리다이렉트 url도 localhost로 하나 등록하시거나, dev-api....에서 확인하시기 바랍니다.
dev 프론트쪽이랑 dev서버에서도 안되네요.
10:55분이후로 호출한적이 없으신대요?
10:55분에 카드 등록 이후 결제 위젯이 렌더링이 안됩니다
다른 계정으로 다시 등록해봤는데,
Access to XMLHttpRequest at 'https://dev-api.textiledesignbank.com/v1/web/toss/test?code=Z1gQ4YVXW9jXXObAa93l2KPo&customerKey=Textiledesignbank-260' from origin 'https://dev-front.textiledesignbank.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
cors 오류가 뜨네요.
네 지난번 disableEnforceFocus 를 true 오류도 그렇고 , CORS오류도 모두 저희 모듈과는 무관합니다.
서버 쪽 설정 등 확인해보셔야할 것 같아요
Origin = https://dev-front.textiledesignbank.com
redirectUrl = https://dev-api.textiledesignbank.com/v1/web/toss/test
지금도 보면 도메인이 달라요.
: CORS 오류를 피하려면 서버에서 Access-Control-Allow-Origin을 요청의 Origin 헤더와 일치하게 설정하거나, *로 모든 출처를 허용하도록 확인해보시기 바랍니다.
텍스타일 디자인 뱅크
텍스타일 디자인 뱅크는 글로벌 프린트 패턴 디자인 중개 플랫폼입니다. 24시간 당신을 위한 글로벌 프린트 패턴 디자인 스튜디오를 만나보세요.
@이실장 님 최근 크롬 정책이 변경되어서, 조금 첨언드릴 내용이 있습니다.
* 로 ACAO 헤더를 넘기면, Access-Control-Allow-Credential이 무시되어, Authorization 헤더를 사용할 수 없게됩니다.
토스 모듈은 SDK 내부적으로 Authorization 헤더를 쓰기때문에, 결제 진행이 제대로 안될거에요.
Origin 헤더와 일치하게 설정하도록 가이드해주셔야 합니다. 🙂잘도와주신 덕분에 테스트 환경에서는 브랜드 페이 작동 완료했습니다.
하지만, 본서버 라이브 적용 중
본인 인증 번호 입력 시 '청약 정보를 찾을 수 없습니다.'라는 오류 메시지와
{type: 'cors', url: 'https://api.tosspayments.com/v1/brandpay/clients/identities/mobile/confirm', redirected: false, status: 400, ok: false, …} 로그가 남습니다.
사용한 customerKey알려주세요
Textiledesignbank-1108
입니다.
라이브 환경 세팅 확인 후 회신드릴게요
라이브 환경입니다.
아 저희 쪽 세팅이요 ^^
@tdb 다시한번 확인바랍니다.
네, 작동잘됩니다ㅎㅎ
덕분에 기능 완성했습니다.
감사합니다!!
네 고생하셨습니다.
안녕하세요. 브랜드 페이 라이브에서
리다이렉트 URL 엔드포인트를 수정하니
저희 서버에 요청이 안오고
framework-f4cbedcca48e53ef.js:9 TypeError: Failed to construct 'Headers': String contains non ISO-8859-1 code point.
에러가 나오네요..
수정은 어디서 하셨나요
코드에서 하신건가요?
저희 서버측 수정도 했고,
프론트쪽에서 redirectUrl도 수정했고,
토스 브랜트 페이 리다이렉트 등록 페이지에서도 수정했습니다.
다른 계정으로 로그인해서 다시 시도해보니 잘됩니다.
저희 개발자센터에 등록 후 반영되는데 5~10분정도 소요될 수 있습니다.
혹시 기존 회원들은
framework-f4cbedcca48e53ef.js:9 TypeError: Failed to construct 'Headers': String contains non ISO-8859-1 code point.
에러가 나오는데, 혹시 어떻게 해결해야 할까요?
이 에러는 결국 accessToken이 발급 안되었을 때 발생하는 에러에요
이 부분을 확인해보시면 좋을 것 같아요
네 알겠습니다. 감사합니다.