Today, I Learned

• CORS & npx serve (sprint advanced)

  계획대로 npx serve를 이용해서 CORS를 좀 더 깊게 알아보고자 했는데, 일단 CORS와 PREFLIGHT 체크 로직이 어떻게 이루어지는지는 더욱 자세히 알 수 있었다.
  먼저, CORS 체크는 서버가 하는게 아니라 브라우저가 하는 것이다.즉, 클라이언트가 예를 들어, CORS policy에 위배되는 original request를 보낸다 했을 때,
  서버는 그것을 서버만의 로직으로 통과시키고 200 ok & response를 보낼 수 있으나, 그것을 거르는(?) 쪽은 웹 브라우저라는 것이다.
  처음에 클라이언트가 original request를 보내면 브라우저는 이것을 보내기 전에 먼저 Preflight request를 보낸다. 
  여기에는 Origin, 즉, 출처가 되는 정보(아이피, 프로토콜, 포트넘버 등)를 담아서 보내고, 서버로 보내서, 서버에게서 CorsHeader를 받는다. 
  그 다음에 브라우저는 서버가 보낸 CorsHeader와 Origin 정보를 비교해서 자체적으로 CORS policy에 위배된다면 에러를 리턴한다.
  그렇다면 스프린트 중에는 왜 브라우저가 관여하지 않았나?를 생각해보면 스프린트 때에는 서버와 서버끼리의 요청, 응답이 아닌 Origin : null인 클라이언트에서 포트넘버 5000인(로컬 호스트)서버로의 요청 및 응답이였기에 CORS policy적용이 안되고, 서버에서 짜준 로직대로만 이루어졌던 것이다.
  그러나, npx serve client/를 이용해서 실제 CORS가 어떻게 적용되는지는 보았지만, npx serve client/를 이용해서 서버를 가동하면 basic-server.js 내의 내용이 먹히질 않는듯(?)해서 원하는 기능을 실현시키지 못하는 문제가 생겼다.
  즉, uppercase, lowercase가 안되는 것..(확실히 다른 호스트로 요청을 보내니까 CORS 정책으로 인해 rejected가 된다. 서버끼리의 요청, 응답에서는)
  이 문제는 추후에 해결해야할 듯하다..이걸로 벌써 어제밤부터 오늘 반나절이 날아갔다..

• 2020/09/28 에러 해결 => 바보짓을 하고 있었다..ㅎㅎ npx serve를 예를 들어, 5002으로 해놓고, 서버는 5000을 해놓고 했어야했는데.. 서버를 npx serve로 하나 열어놓고 했기에(client/) server/basic-server.js에 있는 로직이 실행이 안됐던 것