[WIL] 5주차

주특기가 끝나고 처음 프론트와 협업을 시작했다.

 

아리송했던 프론트와의 연동 방식에서 우린 하던대로 JSON으로 변수명과 형식만 잘 맞춰서 데이터를 잘 넘겨주기만 하면 되고, CORS 설정과 추후에 EC2의 IP 주소만 잘 알려주면 문제없을 것이란 답변을 듣고 생각보다 복잡하진 않은 것 같아서 다행이란 생각을 했었다.

 

프로젝트 설계 단계에서 영화를 검색하면 그것을 서비스해주는 OTT를 알려주는 사이트로 정했었는데, 구현 가능할지 애매해서 좀 더 스코프를 좁게 잡아 SA를 진행했다. 이후 혼자 방법을 찾은 끝에 원하던 것을 구현에 성공해서 큰 뿌듯함을 느끼기도 했다. (TMDB 만세!)

 

CORS (Cross-Origin Resource Sharing)

추가 HTTP 헤더를 사용하여, 한 서버에서 실행중인 웹 애플리케이션이 다른 서버의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

• 기본적으로 브라우저는 보안상의 이유로 다른 서버에 보내는 HTTP 요청을 제한한다
• 다른 서버의 리소스를 불러오려면 그 서버에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다
• 최신 브라우저는 XMLHttpRequest 또는 Fetch와 같은 API에서 CORS를 사용해 교차 출처 HTTP 요청의 위험을 완화

단순 요청

• 클라이언트 요청: foo.example이 bar.other에 보낸 요청

GET /resources/public-data/ HTTP/1.1
Host: bar.other
...
Origin: https://foo.example

• 서버 응답: 추가 헤더를 달아 응답함

...
Access-Control-Allow-Origin: * // 모든 도메인에서 접근 가능

 

...
Access-Control-Allow-Origin: https://foo.example // 해당 도메인에서만 접근 가능

 

프리플라이트 요청

사전에 OPTIONS 메서드로 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청을 보내도 안전한지 확인

• preflight request/response

// 요청
OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
...
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type


// 응답
HTTP/1.1 204 No Content
...
Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
...

• 실제 요청 (POST)
• 실제 요청에는 Access-Control-Request-* 헤더 미포함, OPTIONS에서만 사용

// 요청
POST /resources/post-here/ HTTP/1.1
Host: bar.other
...
X-PINGOTHER: pingpong
Content-Type: text/xml; charset=UTF-8
Referer: https://foo.example/examples/preflightInvocation.html
Content-Length: 55
Origin: https://foo.example
Pragma: no-cache
Cache-Control: no-cache

<person><name>Arun</name></person>


// 응답
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:40 GMT
Server: Apache/2
Access-Control-Allow-Origin: https://foo.example
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 235
Keep-Alive: timeout=2, max=99
Connection: Keep-Alive
Content-Type: text/plain

[Some GZIP'd payload]

 

브라우저가 preflighted request 후 리다이렉트를 지원하지 않는 경우는 복잡해지는데, 추후에 더 공부하면 될 것 같다

 

출처: https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#the_http_response_headers