항해99 7기 5주차 WIL[cors]

항해 5주차.

주특기 주차가 끝나고 미니프로젝트를 시작한 주차이다.

프론트와 백의 협업으로 프로젝트를 완성하는 5주차...

사실 너무 정신없이 하루가 간다. 모르는거 투성이고 에러는 많이 걸리고...ㅠㅠ

팀원들의 도움으로 이 고난과 역경을 헤쳐나갈수있길.

---

CORS란?

CORS란Cross-Origin Resource Sharing, 교차 출처 리소스 공유의 약자이다.

서로 출처가 다른 웹 애플리케이션에서 자원을 공유하는 것을 말한다.

여기서 출처는 '프로토콜://도메인:포트' 이다. 예를 들자면 http://localhost:8080 이다.

CORS에러

[cors에러]

프론트엔드와 백엔드의 출처가 다르면 위와 같은 에러를 심심치 않게 볼 수 있다.

브라우저는 보안상의 이유로 교차 출처 HTTP요청을 제한한다.

이를 해결하기 위해선 백엔드에 CORS관련 설정을 해주어야 한다.

CORS헤더

서버가 접근 제어 요청을 위해 보내는 응답 헤더들이다.

• Access-Control-Allow-Origin
• • 서버의 자원에 접근할 수 있는 출처를 명시한다.
  • 와일드카드(*)를 사용하면 아무 출처에서나 서버의 자원에 접근할 수 있다.
• Access-Control-Expose-Headers
• • 브라우저에게 표시할 헤더를 명시한다.
  • ABC라는 헤더를 브라우저에서 확인할 수 있게 하려면 위의 헤더를 사용하여 ABC헤더를 명시해주면 된다.
• Access-Control-Max-Age
• • preflight 요청 결과를 캐시할 수 있는 시간을 의미한다.

• Access-Control-Max-Age
• • preflight 요청 결과를 캐시할 수 있는 시간을 의미한다.
• Access-Control-Allow-Credentials
• • 같은 출처라면 기본적으로 쿠키가 request헤더에 자동으로 설정된다.
  • 하지만 CORS는 다른출처간의 통신이기 때문에 자동으로 설정되지 않는다.
  • 응답헤더에 헤더의 속성을 true주면 클라이언트에서 보낸 쿠키를 받을 수 있다.
• Access-Control-Allow-Method
• • 요청이 허용되는 메소드를 지정한다.
  • 와일드카드(*)를 통해 모든 메소드를 허용할 수 있다.
• Access-Control-Allow-Headers
• • 요청이 허용되는 메소드를 지정한다.
  • 와일드카드(*)를 통해 모든 메소드를 허용할 수 있다.
• Access-Control-Allow-Headers
• • 서버로 요청 시 사용할 수 있는 헤더를 명시한다.

아래는 웹브라우저가 서버로 요청을 보낼때 사용하는 요청 헤더들이다.

• Origin
• • 출처를 나타낸다.
  • 요청이 시작된 서버의 경로정보는 포함하지 않고, '프로토콜://도메인:포트' 만을 포함한다.
• Access-Control-Request-Method
• • 어떤 메소드를 사용할지 서버에게 알려준다.
• Access-Control-Allow-Headers
• • 어떤 헤더를 사용할지 서버에게 알려준다.

 

---

cors는 프론트와 백의 연결을 수행하는 중요한 기능이다.

이번 주차 동안 cors를 직접 해보면서 TIL에 해당 내용을 수록하도록 하겠다.