로컬 개발 중 귀찮은 CORS 문제, local domain으로 간단하게 해결하자.

CORS관련 오류는 브라우저 자체적으로 보안을 위해 document가 다른 URL의 컨텐츠를 이용하려 할 때 발생한다.

ex)

1. baseurl.com 이 naver.com 으로 요청
2. web.baseurl.com 이 server.baseurl.com 으로 요청
3. baseurl.com:8080 이 baseurl.com:35643 으로 요청

해결 방법은 (python was 기준) 서버측에 flask-cors 나 django-cors 의존성 패키지를 설치하여 적용하거나 response header에 Access-Control-Allow-Origin 관련 내용을 추가하면 간단히 해결할 수 있다.

다만, production config와 dev config를 분리하여 작업하기 귀찮거나, 원본 소스코드를 수정하기 힘든 등의 경우 local에 임의의 url을 만들고, nginx 의 proxy_pass를 이용하여 연결해주는 방식으로 이를 해결 할 수 있다.(물론 nginx에서 Access-Control-Allow-Origin를 직접 추가하여 반환해 주어도 된다.)

-> Mac OS에서 WEB Port 3000, SERVER PORT 3001 기준.

1. 임의의 DNS 만들기

$ sudo vim /etc/hosts
127.0.0.1       localhost
127.0.0.1	innerurl.domain
:wq!

$ sudo killall -HUP mDNSResponder

https://support.apple.com/ko-kr/HT202516

2. Nginx for macOS 설치

$ brew install ngninx

3. Nginx 관련 설정

$ vim /usr/local/etc/nginx/nginx.conf
server {
	listen 80;
    	server_name innerurl.domain;

   	location /{
    		proxy_pass http://localhost:3000;
   	}

   	location /server/ {
    		proxy_pass http://localhost:3001/;
   	}

    }
:wq!

$ brew services restart ngninx

위와 같이 설정한 뒤, Nginx를 restart하면, 웹사이트의 경우 innerurl.domain으로 접속이 가능하고, 서버나 컨텐츠 등의 주소는 innerurl.domain/server/<api_name> 형태로 요청하면 CORS 오류 없이 테스트가 가능하다.

+a) 우분투 등의 계열에서 nginx를 사용할 때에는 conf 파일에 오타나 오류가 있을 경우 실행에 실패하였는데, MAC OS에서 테스트할 때는 정상적으로 재실행 되었다. 혹 똑같이 따라했는데도 동작하지 않은 경우, 세미콜론, 오타, 괄호를 확인하면 될 수도..