프론트엔드와 백엔드가 협업을 하다보면 CORS 에러를 정말 많이 만나게 되는 것 같다.프론트엔드에서 백엔드 서버로 api 요청을 보낼 때 흔히 볼 수 있는 에러이다. CORS는 Cross Origin Resource Sharing의 약자로 한국어로 직역하면 교차 출처 리소스 공유라고 할 수 있는데 CORS가 무엇인지부터 다시 리마인드해보려고 한다.
1. Origin 이란?
보통 우리가 사용하는 주소와 같은 URL은 마치 하나의 문자열같이 보여도, 여러개의 구성요소로 구성되어있다는게 사실이다. 아래의 그림과 같은 주소가 있다고 가정해보면 5가지 정도의 구성요소가 모여있다는 것을 확인해볼 수 있다.
CORS에서의 Origin, 즉 출처라는 것은 Protocol과 Host + 포트번호를 합친 것을 의미하는데, 지금 현재 사이트의 origin을 알고 싶다면 개발자 도구 콘솔에서 location.origin을 출력해보면 된다.
2. SOP(Same-Origin Policy) 란?
sop는 동일 출처 정책이라고 하는데 말 그대로 같은 출처에서만 리소스를 공유하도록 하는 정책이다. 하지만 웹에서는 다른 출처에 있는 리소스를 가져와 사용하는 것이 매우 흔한일이라 몇가지 예외 조항을 두고 허용하고 있는데 그 중 하나가 CORS 정책을 지킨 리소스 요청이다.
3. CORS 에러 해결(Nginx 서버 해결)
CORS는 브라우저 관련 정책이기 때문에 클라이언트단에서 외부 API서버로 바로 요청을 보내면 CORS 에러가 발생한다. 프론트단에서는 로컬 환경에 대한 CORS 문제를 해결할 수는 있지만 배포 후에 발생하는 CORS 문제들은 서버단에서 설정해줘야하기 때문에 프론트와 백엔드의 소통이 또 한번 중요해진다.
로컬에서 개발을 진행하며 개발 서버에 올라가 있는 api로 테스트를 하고 싶어 연결을 했는데 CORS 에러와 마주쳤다. 해당 서버는 nginx 서버이기에 nginx 설정을 통해 CORS 에러를 해결해주었다. 예전에는 백엔드분들한테 주로 요청을 했었는데 지금은 내가 개발서버에 올리고 수정하고 내리고 등을 다 하고 있기 때문에 내가 직접 수정해주었다.
1) 서버에 접속 후, nginx 폴더에서 nginx.conf 파일을 찾는다.
- 서버에 접속하는 방법은 아래 게시물 참고
리눅스 서버 접속방법 (Ubuntu, Terminus, winSCP 등)
프로젝트를 서버에 올리고, 수정하고, 내리고 하는 등의 과정을 반복하게 되면서 서버에 접속하는 방법에 대해서 정리해보려고 한다. 간단하지만 내가 까먹지 않기 위해 정리하는 것. 1) Ubuntu 터
choijying21.tistory.com
2) vi, vim 등의 편집기로 nginx.conf 파일을 열어 내가 요청하고자 하는 경로에 아래 부분을 추가해준다.
- 'Access-Control-Allow-Origin' '*' 은 모든 도메인의 접근을 허용한다는 뜻이기에 특정 도메인만 허용하고 싶다면 'Access-Control-Allow-Origin' 'origin(출처 입력)' 등으로 명시하면 된다.
location /(경로) {
proxy_hide_header Access-Control-Allow-Origin;
add_header 'Access-Control-Allow-Origin' '*';
.
.
.
()
.
.
.
}
3) 이렇게 설정해준 후, nginx 도커 컨테이너를 재실행하면 잘 연결된다~!
3. CORS 에러 해결(Chrome CORS 허용)
Postmas을 사용하거나 vscode의 Rest client를 사용하면 cors 에러를 접하지 않을 수 있지만 브라우저에서 요청할 때는 만날 가능성이 높다. nginx 서버에서 설정해줘도 되지만 간단하게 테스트하고자 할 때는 Chrome에서 CORS를 무시하도록 해제할 수 있는데 그 방법도 유용하게 쓰고 있는 것 같다.
이 방법은 생각보다 간단해서, 빠르게 테스트해야할 때 주로 썼던 것 같다.
1) 먼저 터미널을 실행시키고, Chrome.exe가 있는 폴더로 이동한다.
C:\Users\choij>cd C:\Program Files\Google\Chrome\Application
2) 해당 경로에서 chrome.exe --disable-web-security --user-data-dir=C:\Temp 옵션을 주어 Chrome을 실행시키면 된다.
C:\Program Files\Google\Chrome\Application> chrome.exe --disable-web-security --user-data-dir=C:\Temp
3) 그러면 이러한 창이 실행되는데, 이 페이지를 통해서 작업하면 CORS 에러가 발생하지 않는다.
4. Mac에서 CORS 무시, Chrome 창 여는 방법
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security