- 식당 메뉴판 만들기 (feat. CORS의 늪에 빠지다.)
회사 근처에는 '밥플러스'라는 한식뷔페가 있다. 정말 맛있다. 이 곳은 약 6개의 지점을 운영하는데 블로그에 메뉴판을 게시하기에 그 메뉴판을 한 곳에 모으는 페이지를 만들어보려고 했다..🥲
밥플러스 2호점(메타모르포점) 오늘의 메뉴
밥플러스 2호점(메타모르포점) 석식은 운영하지 않습니다. 메타모르포점 셀프도시락은 종료되었습니다. | ...
blog.naver.com
- axios를 활용한 스크랩핑
온전히 Web에서만 동작하도록 만들려고 했었다. 이에 JavaScript의 axios를 사용했다.
처음엔 매우 순조로웠다. 그러나..
// 지정된 ID를 가진 유저에 대한 요청
axios.get('http://naver.com')
.then(function (response) {
// 성공 핸들링
console.log(response);
})
.catch(function (error) {
// 에러 핸들링
console.log(error);
})
.finally(function () {
// 항상 실행되는 영역
});
CORS를 만났다.
Access to XMLHttpRequest at 'https://blog.naver.com/babplus123/222378669083' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
혹시나 해서 네이버도 접근해보았다. 그러나 결과는 동일했다.
Access to XMLHttpRequest at 'http://naver.com/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
이리저리 시도해보았으나 실패.. CORS에 대해 알고는 있었지만 자세히 알지는 못했었나보다.
(CORS의 개념은 Inpa님이 잘 설명해주셨기에 아래 첨부)
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이
inpa.tistory.com
- iframe을 활용한 접근
이에 그 다음으로 시도한 방법은 iframe. 일종의 편법을 꺼내든 것이였다.
iframe으로는 해당 게시물이 정상적으로 나왔다!
해당 게시글에 접근이 되는 것을 확인하였으니, 이제 내부에 있는 이미지를 가져오려고 했다.
메뉴판 이미지의 태그를 console로 찍어보았다.
iframe으로 열린 창이기에 외부에서 접근하여 특정 태그를 가져오는 건 불가능했다. (이 또한 CORS..)
그럼 irame 내부의 CSS를 변경하여 메뉴판을 화면의 틀을 맞추면 되지 않을까라는 생각을 해보았다.
index.html:17 Uncaught DOMException: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "http://127.0.0.1:5500" from accessing a cross-origin frame. at HTMLIFrameElement.<anonymous> (http://127.0.0.1:5500/index.html:17:65) at HTMLIFrameElement.dispatch (https://code.jquery.com/jquery-3.6.0.min.js:2:43064) at v.handle (https://code.jquery.com/jquery-3.6.0.min.js:2:41048)
CORS를 어떻게든 해결할 수 있을 것이라 생각했는데 너무 과소평가 했었나보다.
하루종일 삽질한 나의 결론은 CORS에게 gg..🏳️
