chrome 브라우저 CORS 해결 방법 (has been blocked by CORS policy)

chrome 브라우저 CORS 해결 방법 (has been blocked by CORS policy)

 

크롬 브라우저 CORS 해결 방법

origin 'null' has been blocked by CORS policy

 

일반적이진 않은 케이스지만 로컬에서 띄운 'file:// 기반 HTML'에서 api 요청을 통해 응답 결과를 처리하는 간단한 화면단을 구성 중 chrome 브라우저에서 위와 같은 CORS policy 문제가 발생했습니다.

(HTML을 file:// 기반으로 열어서 실행하게 되면 브라우저에서는 origin을 null로 인식하게 됩니다.)

 

분리망 환경이고 요청을 보내는 곳은 한 곳인 반면, 여러 서버에 요청을 보내야 하는 상황이었기 때문에 각 서버 애플리케이션에서 CORS에 대한 처리 작업을 하는 것보다는 요청을 보내는 브라우저에서만 처리할 수 있으면 그게 더 간단하다고 판단되어 브라우저 단에서 CORS를 해결할 수 있는 방안을 찾아보았습니다.

 

 

---

--disable-web-security 설정

브라우저 단에서 CORS 문제를 해결하기 위해 찾은 방법은 '--disable-web-security' 설정을 추가하는 것인데요.

 

* 해당 방안은 CORS를 포함한 각종 보안 검사를 브라우저단에서 비활성화하는 설정이기 때문에 보안적 문제가 발생할 수 있습니다. 때문에 개발환경 또는 통제된 환경 등에서만 주의해서 사용해야 합니다.

 

 

Chrome 바로가기, 대상 부분 설정 추가

windows 환경의 경우 우선 크롬 브라우저 바로가기를 만든 뒤, 대상 부분의 "C:\Program Files\Google\Chrome\Application\chrome.exe" 부분 뒤에 아래 내용을 추가해 주면 됩니다.

 

--disable-web-security --user-data-dir=%LOCALAPPDATA%\Google\chromeTemp --allow-file-access-from-files

 

--disable-web-security : CORS 등의 보안정책 비활성화

--user-data-dir=%LOCALAPPDATA%\Google\chromeTemp : 임시 사용자 데이터 디렉터리

--allow-file-access-from-files : file:// 리소스 접근 허용

 

 

 

--disable-web-security 사용 중 경고 문구

설정이 정상적으로 적용된 경우 해당 이미지와 같이 '지원되지 않는 명령줄 플래그 (--disable-web-security)를 사용 중이므로 안전성과 보안에 문제가 발생합니다.'라는 경고 문구가 출력됩니다.

 

 

open -na "Google Chrome" --args \
  --disable-web-security \
  --user-data-dir=/tmp/chromeTemp \
  --allow-file-access-from-files

 

추가로 mac 환경에서는 터미널을 통해 위 명령어를 실행하게 되면 동일한 설정으로 크롬 브라우저를 사용할 수 있습니다.