210206_TIL

🍎 오늘 한 일

---

✔️ CORS 정리
CORS에 요청방법이 세 가지가 있는데, Preflight Request, Simple Request, Credential Request 이렇게 나뉜다. 각각에 조건들이 있어서 그 부분에 대해 정리했다. 특히 CORS를 판단하는 시점이 중요하다고 느껴졌는데, 판단 + 응답 파기 여부는 브라우저가 결정
하기 때문에, 요청의 실패나 성공에 상관없이 그 이후에 CORS 위반 여부가 판단된다. 이 점은 테스트를 해보면서 직접 확인할 수 있었다.

✔️ CORS 테스트
클라이언트랑 서버를 분리해서 CORS와 관련된 테스트들을 해봤다. 포트번호가 동일할 때와 다를 때, Allow-Control-Allow-Origin 값을 * 로 했을 때와 origin으로 설정했을 때, 요청시 헤더 Content-Type을 text/plain으로 설정했을 때와 아닐 때 (프리플라이트 확인용) 등 이런 저런 조합으로 테스트를 해보고 네트워크창을 확인해봤다. 포트가 동일할 때는 ERR_FAILED 에러가 발생하고, 포트가 다를 때는 ERR_EMPTY_RESPONSE 에러가 발생하는데, 전자는 브라우저 문제인 것 같고 후자는 의도대로 나온 CORS정책 위반으로인한 에러인 것 같았다. 

 

🍎 기억할 것

---

✔️ Simple Request 조건
조건 1. 메서드 : GET, POST, HEAD
조건 2. 헤더 : Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width
조건 3. Content-type 값 : application/x-www-form-urlencoded, multipart/form-data, text/plain
(이 중 하나라도 만족하지 않으면 Preflight 요청을 날려버림)

 

🍎 더 공부할 것

---

✔️ ERR_FAILED, ERR_EMPTY_RESPONSE
✔️ 토이 복습