크롬 브라우저 UI 렌더링 문제
안녕하세요. 현재 테스트 계정으로 결제위젯 연동 개발하고 있는데, 크롬 및 엣지 브라우저에서 결제위젯 UI가 보이지 않는 문제가 있어 문의드립니다.
맥 사파리에서는 정상적으로 보이는데, 크롬과 엣지 브라우저에서는 사진과 같은 화면입니다.
"Specify a Cross-Origin Resource Policy to prevent a resource from being blocked" 에러가 발생하는데, 혹시 같은 에러가 발생한 경우가 있을까요?
26 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
cors가 정확히 어디서 발생하는지 공유해주신 정보만으로 확인 어렵습니다.
위젯 기능만 구현되어있는 페이지인가요?
아니면 다른 기능이나 통신등이 이루어지나요
제 생각에는 크롬 익스텐션이 돌아가고 있는 것 같습니다.
대표적으로 Useragent Changer, CORS Unblock과 같은 익스텐션에서 헤더를 조작하는 것으로 알려져 있어
설치되어있는 크롬익스텐션이 있다면 삭제 후 진행 부탁드립니다
발생하고 있는 에러입니다.
크롬 익스텐션은 이 외에 사용하고 있지 않고, 삭제 후 진행해보아도 해결이 되지 않았습니다
iframe등 사용 중이신가오ㅛ?
네 맞습니다
https://codesandbox.io/p/sandbox/payment-widget-vanilla-js-sample-3ehy1x?file=%2Fclient%2Findex.html
해당 코드 토대로 구현하였습니다
payment-widget/vanilla-js-sample
결제위젯 JS 샘플
ㅇㅣ코드 그래도 쓰셨다는 말씀이신가요?
네 client 디렉토리 내 html, js 파일은 동일하게 사용하였고, server.js 에서 변경 필요한 경로와 API key 등은 수정한 후 사용하였습니다. 필요 패키지는 따로 설치하고, 그 외 파일은 사용하지 않았습니다
우선 다른 PC 크롬 브라우저에서 한번 확인해주시겠어요?
맥과 윈도우 크롬 브라우저 모두 위젯 UI가 보이지 않습니다
서로 다른 PC로 확인하였습니다
iframe 안에 있는 페이지에서 결제위젯을 렌더링하시는건가요?
그리고 에러내용을 보면 메인페이지의 헤더에 Cross-Origin-Embedder-Policy 이게 설정되어 있는것 같습니다.
해당 헤더를 제거하고 다시 확인해 주세요.
헤더 제거 하여도 같은 문제가 발생합니다
iframe은 토스페이먼츠 위젯 연동하는 코드 작성하니 id "payment-method" 태그 안에 iframe 태그 형태로 추가된 것으로 확인했습니다
네 그건 저희가 자동으로 생성하는 것이고 혹시 최상단페이지에서 iframe 이 있고 그안에 페이지에서 다시 결제위젯을 렌더링하는 것인지 문의 드린겁니다.
헤더 제거 후에 에러메시지가 동일하신가요?
네 헤더 제거 후에도 에러 메시지가 동일합니다
그럼 헤더가 삭제 안되신것 같습니다.
페이지 뿐만 아니라 웹서버 등에서 일괄설정이 가능한 부분이 있으므로 이것도 확인 부탁드립니다.
크롬 개발자 도구의 네트워크탭에서 현재 페이지 로딩될때 reponse header 를 확인해서 관련 헤더가 사라졌는지 확인해 주세요.
서버 내에 있는 Cross-Origin-Embedder-Policy 헤더 모두 삭제 후 진행해보았는데, 아래 위치에서 사진과 같은 에러가 뜹니다
<script src="https://js.tosspayments.com/v1/payment-widget"></script>
https://stackoverflow.com/questions/69832906/how-to-prevent-err-blocked-by-response-notsameoriginafterdefaultedtosameoriginby
여기 내용도 한번 보시겠어요?
Stack Overflow
How to prevent ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedT...
I am attempting to access my movie API that returns data including an image of a movie poster through a React application. This image is being requested from an external website. Each time I make a
crossorigin="anonymous" 추가하고, res.header('Access-Control-Allow-Origin', '*'); 추가하였는데, 사진과 같은 에러가 발생하고 있습니다
네트워크탭에서 reponse header에 Access-Control-Allow-Origin이 뜨는 것도 확인하였습니다
죄송하지만, 해당 내용은 저희가 운영하시는 인프라 환경에 대해서 명확하게 알수 없기 때문에,
전달하시는 내용은 단편적으로 밖에 가이드 드릴수 없습니다.
error 관련해서, to fix this issue 로 가이드를 하고 있으니 해당 부분 확인 하시거나,
stack overflow 등에서 비슷한 환경의 상황에서 해결된 내용이 있는지 확인 해보시는 것을 권장 드립니다.
네 알겠습니다 감사합니다
양해 감사합니다.
결제 쪽 문의가 있으시면 언제든 편하게 말씀 바랍니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
네트워크탭에서 reponse header에 Access-Control-Allow-Origin이 뜨는 것도 확인하였습니다이부분 캡쳐해서 보내주시면 좋을것 같습니다. 해당 페이지의 모든 reponse header 를 캡쳐해서 올려주세요.