[Vue] google chrome CORS 우회하기

Vue 개발을 하다가 local개발환경에서 다른서버에 띄워져있는 RestAPI를 사용하려고했는데 아래와같이 CORS에러가 발생했다.

주소는 다른곳에서 가져온거라 내꺼랑 동일하진않다. 뭐 중요하진않겠지만...

 

이것저것 다해봤지만 모두 실패했다

• withCredential관련 정보 추가 시도
• Allow 뭐시기 추가 시도

근데 알고보니 위에 시도는 서버/클라이언트 둘다 적용을 해야지만 성공하는거였다. 난 일단 RestAPI를 사용하는곳엔 저런 설정을 하기엔 좀 리스크가 있다고 판단했고 CORS를 우회 할 수 있는 방법이 있는지 찾아보았는데 다행히 존재했다.

 

Google Chrome 설정 (MacOS)

아래와같은 명령어를 실행해서 google chrome의 CORS를 우회한다

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
	--args --user-data-dir="/tmp/temp_jaeyung" --disable-web-security

성공적으로 우회됐다면 chrome창에 아래와같이 표시가된다. 추가로 위와같은 설정을했다면, 기존에 북마크등 정보들이 임시적으로 사용을 못한다.

 

만약에 사용(개발)을 다했다면 아래와같이 기본설정으로 되돌려준다.

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
	--args --profile-directory=Default --enable-web-security