요즘은 굳이 MSA^{Microservices Architecture} 가 아니더라도 프론트엔드^Front-end와 백엔드^Back-end를  구분하여 프론트 엔드는 Anguler나 React로 개발하고 백엔드는 프론트엔드에서 사용할 API를 제공하는 것을 흔히 찾아 볼 수 있다.

이때 부딪치게 되는 문제가 CORS^{Cross Origin Resource Sharing}이다. CORS 개념에 대한 자세한 설명은 김형준님의 글(CORS, Preflight, 인증 처리 관련 삽질)에 잘 나와 있다.

프론트엔드에서 API 호출 시 CORS 문제가 생기지 않도록 API 서버 개발자는 CORS 관련 설정을 해주어야 한다.

API 서버 개발자는 CORS 설정이 제대로 되었는지 어떻게 확인할 수 있을까? 가능하면 실제 운영하는 서버에 코드를 배포하기 전에 개발자 자신의 로컬 환경에서..

cURL 명령어로 CORS 테스트

테스트 시나리오는 김형준님의 글(CORS, Preflight, 인증 처리 관련 삽질)을 예시를 그대로 사용하겠다.(만약 글을 보지 않았다면 CORS 관련 부분만 보고 다시 읽기를 권한다)

출처 : http://www.popit.kr/cors-preflight-인증-처리-관련-삽질/

위의 그림에서 CORS 테스트 대상은 sales.popit.kr이다.

sales.popit.kr의 개발자(API 서버 개발자)는 자신의 로컬 개발 환경에 서버(localhost)를 구동하고 아래 cURL 명령어를 실행하면 CORS 여부를 확인할 수 있다.

1
2
3
4
5
6
7
curl \
--verbose \
--request OPTIONS \
'http://localhost/sales' \
--header 'Origin: http://sales-front.popit.kr' \
--header 'Access-Control-Request-Headers: Origin, Accept, Content-Type' \
--header 'Access-Control-Request-Method: GET'

CORS 설정(sales-front.popit.kr 허용)이 정상적 되었다면 HTTP Response Code가  200(OK)이 반환되며

아니라면 405(Method Not Allowed)로 반환된다.(API 서버에 따라 403으로 반환되는 경우도 있다)

로컬 개발 환경이 아닌 실제 배포된 운영 서버를 확인하려면 cURL 명령어 매개 변수 중 http://localhost/sales 를 운영 URL(본 글 예시에서는 http://sales.popit.kr/sales)로 변경하면 된다.

결국 필자가 사용한 cURL 명령어는 웹 브라우저의 Pre-flight 요청을^[1] 대신하는 것이다.

cURL

cURL 명령어는 cURL에서 지원하는 여러 프로토콜^Protocols 중 특정 프로토콜 하나를 사용하여 데이터를 서버로 전달하는 도구라고 MAN 페이지에서 설명하고 있다.

curl is a tool to transfer data from or to a server, using one of the supported protocols (DICT, FILE, FTP, FTPS, GOPHER, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, POP3, POP3S, RTMP, RTSP, SCP, SFTP, SMB, SMBS, SMTP, SMTPS, TELNET and TFTP). The command is designed to work without user interaction.

curl offers a busload of useful tricks like proxy support, user authentication, FTP upload, HTTP post, SSL connections, cookies, file transfer resume, Metalink, and more. As you will see below, the number of features will make your head spin!

curl is powered by libcurl for all transfer-related features. Seelibcurl(3)for details. - https://curl.haxx.se/docs/manpage.html

cURL은 HTTP(S) 프로토콜을 지원한다. 그래서 웹 브라우저 없이도 cURL 명령어를 통해 HTTP Reqeust를 만들어 서버로 전달하는 것이 가능하다.

만약 윈도우즈를 사용하고 있다면

https://curl.haxx.se/download.html에서 cURL 윈도우즈 버전을 제공한다.

만약 Chocolatey를 사용하고 있다면 아래 명령어를 사용하여 설치해도 된다.

1
choco install curl

주석

[1] https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS '사전 요청'절 참조