MAC에서 CORS policy 오류 해결하기

 

 볼때마다 짜증이 솟구치는 CORS 에러🤬 

 

AJAX 테스트 중 또, 또 그녀석이 어김없이 나타났다. CORS 에러다. 로컬에서 테스트를 하려고 하면 나타나서 진상을 부리는 단골손님이다. 해결을 하지 않으면 테스트도 할 수 없고, 일도 진행할 수 없어서 CORS Policy 오류를 해결하는 우당탕탕 일지를 작성한다.

 

 

---

 

 CORS 에러는 왜 생기는거야? 

 

 

먼저, CORS가 무엇인지부터 간단하게 파악해보자. CORS는 Cross-Origin Resource Sharing의 약자로, 교차 출저 리소스 공유라는 뜻은 가진 단어다. 추가 HTTP 헤더를 사용하여 실행중인 웹 어플리케이션이 다른 origin의 리소스에 접근할 수 있도록 브라우저에서 알려주는 체제이다. 하지만 보통은 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하는 용도로 사용된다. 

 

설명을 읽고 이해를 해보면 CORS의 정책 문제는 다른 리소스를 접근할때 발생하는 것이라는 뜻이다. 그런데 왜? 왜 같은 로컬환경에 있고, 같은 폴더내에 존재하는 JSON을 찾는 AJAX를 실행하는 것이 정책에 위반되었다는 것일까? 오류를 한번 제대로 읽어보자.

 

Access to XMLHttpRequest at 'file:///파일경로/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

 

오류를 읽으면 발생한 에러에 대해 이해할 수 있는데 해당 경로를 지원하는데 리소스의 출처가 null로 넘어고 있다고 써져있다. 출처가 없으니 너무나도 당연하게 CORS 정책에 위반될 수 밖에 없었던 것이다. 해당 스크립트가 null로 넘어가있는 걸 확인하려면 개발자도구의 네트워크를 확인해보자. 결론은 로컬은 출처가 null로 인식되기 때문에, 서버를 열어 없다는 리소스의 출처를 알려주면 된다고 써져있는거다. 하지만 나는 html로만 작성하고 있어, 열 수 있는 서버가 없다😂  멀고 험난한 CORS 해결길로 떠나보자.

 

 

---

 

 해결방법을 찾고싶어! 

 

 

다양한 해결방법이 구글에 나와있는데, 그 중에 시도해봤던 것들을 정리해보려고한다. 내가 사용하고 있는 기기는 제목에도 나와있듯이 MAC이며, 로컬에서 테스트를 원하고 있다.

 

 

1. 크롬 바로가기 속성을 이용하여 웹시큐리티 막기

 

크롬의 바로가기 속성을 이용하여 대상을 지정해주는 방법이다. 그러나 MAC은 바로가기 생성하는게 없었고, 크롬의 속성을 여는 방법도 알 수 없었다. 이 방법은 시도하다가 포기했다. 제일 확실한 방법인 것 같은데 할 수 없는게 슬펐다.

 

 

---

 

 

2. 크롬웹스토어에서 CORS 프로그램 깔기

 

 

크롬의 다양한 추가기능을 사용할 수 있는 웹스토어에서는 CORS 에러를 해결해주는 플러그인들이 존재한다. 나는 블로그에서 추천해줬던 Allow CORS 를 사용했었다. 추가된 플러그인을 실행하여 다시 html을 열어봤지만 문제가 해결되진 않았다. 로컬에서 실행하는건 해당되지 않는걸까?😂

 

 

---

 

3. 터미널을 이용하여 보안해제하기

 

 

터미널을 이용하여 크롬의 설치경로로 직접 들어간 후, --disable-web-security 를 이용하여 직접 해당 디렉토리의 보안을 해제하는 방법이 있다. 근데 이 부분 해제하고 난 다음에는 다시 등록은 안되는걸까? 보안상으로 적합한지 의문이다. 업무용 컴퓨터라... 겁이나서 실행은 못해봤다.

 

 

---

 

4. VSCODE npm을 이용하여 http 서버 열기

 

 

http 임시 서버를 열어주는 npm을 사용하여 서버를 열어 거기서 테스트를 하는 방법이다. 바탕화면에서 터미널을 열거나, vscode에서 터미널을 열어 아래의 npm을 설치 후 실행해준다. 전역설치를 위해 -g를 붙인다.

// 전역 설치하기
npm install http-server -g

// 서버실행하기
npx http-server

서버를 실행하면 포트번호와 함께 로컬주소가 뜨고 거기로 접속하여 들어가고 싶은 경로를 입력하면 완벽하게 실행이 된다. 리소스 출처가 없어 문제가 생기던 CORS 오류도 깔끔하게 해결되었다. 데이터가 잘 들어오는것도 확인 완료!

 

다양한 방법들 중 이 방법이 제일 안전하고 좋은 방법인것같다. npm이야 문제가 되면 삭제하면 되니 말이다! 다들 CORS 오류때문에 골치아플텐데 위 방법들이 도움이 되면 좋겠다!

 

 

 

 

참고문서 : hjink247.tistory.com/31

[Error.006] 웹 크로스 도메인 에러: CORS policy

참고문서 : velog.io/@takeknowledge/%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-CORS-policy-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3gk4gyhreu

로컬에서 CORS policy 관련 에러가 발생하는 이유