오늘 배운 내용
📍 프로젝트를 진행하다보면 CORS 라는 에러를 자주 맞닥뜨린다고한다. (당황하지말고 잘 처리하자)
📍 아직 프로젝트 시작 전이라 잘 와닿지 않지만 알아만 두자!

CORS, Cross-Origin Resource Sharing

📚 CORS 는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘
CORS 는 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로 CORS 라는 이름으로 표준화 되었다. CORS 는 최신 브라우저에서 구현된 동일 출처 정책(SOP same-origin policy) 때문에 등장했다.

정확하게 말하자면 요청을 CORS가 보내고 있는데 SOP가 이걸 막아서 나는 오류⛔️
(우리의 브라우저에 저장된 쿠키(인증관련)를 악용할 수도 있기 때문에)
아래의 영상은 SOP 가 그 요청을 왜 막고 있는지 CORS 가 무엇인지 자세히 설명해주신다.
🔥 얄팍한 코딩사전님의 CORS관련 유투브

어떤 요청이 CORS 를 사용하는가?

• XMLThhpRequest, Fetch API 호출
• 웹 폰트 (@font-face에서 교차 도메인 폰트 사용 시)
• WebGL 텍스쳐 등...

간단하게 확인해보기

• codepen 웹사이트에서 내가 사용하는 코드(fetch)를 사용하면 CORS 에러가 난다.
  • codepen (외부의 사이트) ⇒ ip와 local 모두 다름
  • localhost:3000 ⇒ 웹사이트 서버. 우리는 3000번 포트
  • 우리의 클라이언트 역시. (localhost:3000)이 요청하고 응답해야함
    

  포트는 데이터의 통로라고 할 수 있다.

해결방법

접근제어 시나리오 예제가 상세히 설명되어 있다.
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
시나리오 예제중 단순 요청 부분을 참고하기

에러 메세지 살펴보기

codepen의 웹사이트가 나의로컬의 컨텐츠를 호출하려고 하는 과정에서 난 오류

Access to fetch at 'http://127.0.0.1:3000/expost/getlist' 
from origin 'https://cdpn.io' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

• 에러 메세지에 의하면 origin 으로부터 접근제한이 되었다

• HEAD 의 origin 부분을 바꿔주면 된다.
  • 방법1. res.setHeader() 으로 header정보를 응답해주기
  • 방법2. cors 라는 모듈을 사용하기 (npm i cors)

const cors = require('cors');
app.use(cors({
  origin: '*',
  methods: ['GET', 'POST', 'DELETE', 'UPDATE', 'PUT', 'PATCH']
  // 보통은 골라서 허용함
}))

• codePen 에서도 잘 뜨는것을 확인할 수 있다.
  

  ---

  MDN 문서가 정말 친절하게 설명해준다. CORS MDN 문서
  CORS 에러를 만난다면 필요한 부분을 찾아서 정독하자