[Vue.js] API서버 이용 중 발생한 CORS 위반 해결 방법

1. CORS 위반

[그림 1] cors 위반?? ㅠㅠ

 

Spring boot로 만들어진 API 서버가 121번으로 시작하는 주소를 가지고 있고, 제작 중인 Vue.js 프로젝트에서 해당 주소로 API를 요청하는데 발생한 에러이다.

POST 메서드로 로그인 API를 호출하면 아래와 같은 정보가-잘-날아온다.

{
    "username": "admin",
    "token": "블라블라",
    "idx": 1
}

문제는 해당 토큰을 Headers에 실어서 다른 API를 호출하면 어김없이 [그림 1]과 같은 cors 위반 에러가 발생한다는 것이다.

CORS(교차 출처 리소스 공유 : Cross-Origin Resource Sharing, CORS)는 브라우저가 담당하는 정책이다. 데이터의 출처가 상이한 경우에 발생한다. 제작 중인 Vue.js 프로젝트는 127.0.0.1이라는 주소를 가지고 있고 API 서버는 121.x.x.x이기 때문에 발생하게 된 것이다.

 

2. 해결한 방법

해결한 방법은 "https://cors-anywhere.herokuapp.com/"를 API 서버 주소 앞쪽에 붙이는 방식을 썼다. 프록시 서버를 별도로 만드는 수고가 필요치 않아 매우 간편했다.

이로써 cors 문제는 해결됐는데 403 forbidden 에러가 발생하였다. cors-anywhere 남용을 막기 위해서 https://cors-anywhere.herokuapp.com/corsdemo에 들어가서 방문자가 사용하겠다고 데모 버튼을 눌러서 잠금을 해제해야만 사용할 수 있다고 한다. 개발단계에서 임시로 사용한다면 유용할 수 있겠다.

 

참고한 사이트
https://blog.naver.com/PostView.naver?blogId=handam81&logNo=222511770317&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView 

 

 

3. 추가 내용

3.1. 너무 많은 요청 → 429 에러

"https://cors-anywhere.herokuapp.com/"를 이용할 때 너무 많이 요청하면 [그림 2]와 같이 429 에러가 발생한다.

[그림 2] 429 에러

 

3.2. 크롬 브라우저 CORS 허용

개발단계에서 필요한 것이라면 크롬 브라우저에 CORS 허용 설정을 해주는 것이 가장 간편한 방법이다. 적용 방법은 크롬 브라우저를 실행할 때 아래의 옵션을 추가하면 된다.

--disable-web-security     // CORS 사용 체크 안 함.
--allow-file-access-from-files     // AJAX / JSON 같은 것을 사용 할 때 로컬 파일에 대한 엑세스 허용.

 

적용 방법

1. 크롬 바로가기 아이콘을 생성 → 마우스 우클릭 → 속성
2. 대상에 크롬 브라우저 실행 경로 뒤에 위 옵션을 추가하면 된다.

😉적용예
"C:\Program Files (x86)\Google\Chrome\Application\chrome_proxy.exe" --disable-web-security --user-data-dir=%LOCALAPPDATA%\Google\chromeTemp --allow-file-access-from-files