2023.06.19 TIL

오늘의 나는 무엇을 잘했을까?

CORS에 대해 심층적으로 공부했다. 원래 알고 있는 내용이지만 데일리 미션에 출제되었는데 내용을 써보려고 하니 생각보다 정리가 잘 안되었다. 그래서 블로그, 영상들을 찾아보며 제대로 다시 공부했다. 웹 개발자라면 필수적으로 알아야 할 지식이기 때문에 잘 공부한것 같다.

오늘의 나는 무엇을 배웠을까?

CORS

• CORS: Cross Origin Resource Sharing
• 서로 다른 오리진끼리 자원을 공유하는 행위
• CORS 에러: 서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP헤더 기반 매커니즘
• 오리진: 프로토콜과 호스트이름, 포트의 조합을 의미, 예를 들어 https://my-site.com:12010/about에서 오리진은 https://my-site.com:12010이 오리진이다.
• SOP: same origin policy, 같은 오리진끼리만 요청과 응답을 주고 받도록 하는 브라우저 정책
• 프론트 127.0.0.1:3000 에서 백엔드 127.0.0.1:12010으로 요청을 보내면 오리진이 달라 CORS에러가 난다.
• 해결방법
  • 프론트엔드
  1. 프록시 서버를 둬서 프론트엔드 서버에서 요청되는 오리진을 서버의 오리진과 동일하도록 바꾸는 방법
  • 백엔드
  1. 브라우저에게 응답을 보낼 때 header에 ****Access-Control-Allow-Origin이라는 필드에 이 리소스에 접근하는 것이 허용된 출처(오리진)을 명시하여 보낸다. 브라우저가 응답을 받은 후 요청 헤더의 origin과 응답헤더의 Access-Control-Allow-Origin을 비교하여 매치되면 CORS에러가 사라지고 자원을 공유할 수 있게 된다.
• Node.js

오늘의 나는 어떤 어려움이 있었을까?

집중력이 떨어져 힘들었다. 날씨가 더워지고 클러스터에 안나가다 보니 집에서 공부하는 것이 힘든것 같다. 앞으로 더워서 집중이 안되려 하면 선풍기를 틀어놓고 해야겠다.

내일의 나는 무엇을 해야할까?

• nodejs완강
• 특강 듣기