fetch axios header proxy Proxy URL CORS까지

 

1. 사건의 발단 ( subtitle : 알찬 주말 계획 ~! → → →  ? )
   • fetch와 axios 차이점? (axios를 쓰는 목적? 이유?)
   • fetch https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
   • fetch 스펙 문서 (Nooooo...  ) https://fetch.spec.whatwg.org/
   • axios 면접 질문 검색
     • Promise
2. axios 특징 https://axios-http.com/docs/api_intro
   • Instance
   • Interceptor
   • proxy
   • (JSON 자동 변환)
3. headers에 대한 의문
   • 그나저나, API 요청에 헤더는 왜 필요하지???
4. axios config 읽기 (잘 모름. 어떤 속성이 있는지 본 것)
   • Proxy, URL 
   • proxy라는 말을 많이 들어봤는데, proxy는 무엇일까?
     • 최근의 Vercel에서 사용한 서버리스 함수와 비슷하다는 생각이 듦
     • https://ko.javascript.info/ 에서 프록시 설명이 있던 게 기억남 https://ko.javascript.info/proxy
     • 이건 Proxy 객체였음.. wrapper 같다는 생각 (실제로 validation에 쓰이는 것 같음)
     • 결론적으로 둘 다 중간에 가로챈다는 의미를 내포함. 하지만 둘은 다름.
       • axios 의 proxy는 origin이 다른 경우, proxy 서버를 통해 origin을 같게  만들어서 요청을 보내는 것
       • Proxy 객체는 객체에 대한 기본 동작을 재정의 함
   • URL 객체
     • 팀원분의 코드에서 URL 객체를 봤던게 기억남 https://ko.javascript.info/url
     • axios의 config에서 proxy속성 중 protocol, host, port가 있어서 URL 객체에 대해서도 함께 읽어봄
5. CORS.. ※ headers!!!  https://ko.javascript.info/fetch-crossorigin
   • Cross-Origin Resource sharing(R이 Request 아님)
   • 서버에서 CORS를 허락했다는 특별한 헤더를 전송했을 때에만 CORS가 가능하도록 제약
     • CORS를 오류라고 생각하기 보단, CORS를 서버에서 허락 할 것인지..로 생각해야..?
   • CORS 요청 두가지: (1) 안전한 요청 (2) 안전하지 않은 요청
   • 안전한 요청
     • GET, POST
     • 브라우저 → 서버로 보내는 헤더
       • Origin 
     • 서버 →  브라우저로 보내는 헤더
       • Access-Control-Allow-Origin
     • Access-Control-Allow-Origin를 통해 브라우저는 서버가 CORS를 허용하는지 확인한 뒤, 응답에 접근할 수 있도록 함
   • 안전하지 않은 요청
     • 사전 요청: preflight 요청 (서버에 바로 요청하지 않고, 권한이 있는지 확인함)
     • 브라우저 → 서버로 보내는 헤더 == "안전하지 않은 걸 보낼것인데, 요약해서 이런것 이런것임. 사전에 확인 바람"
       • Origin
       • Access-Control-Request-Method (PUT PATCH DELETE등의 메서드. 본 여청의 (안전하지 않은) 메서드)
       • Access-Control-Request-Headers (안전하지 않은 헤더 목록. 본 요청의 (안전하지 않은) 헤더 정보)
     • 서버 →  브라우저로 보내는 헤더 == "허락합니다" 여부
       • Access-Control-Allow-Origin
       • Access-Control-Allow-Method
       • Access-Control-Allow-Headers
       • Access-Control-Max-Age
     • 클라이언트 → 서버로 보내는 헤더
       • 본 요청(request)을 서버로 전송 (Origin). 이제부터는 안전한 요청과 동일
     • 서버 →  클라이언트로 보내는 헤더
       • Access-Control-Allow-Origin
6. headers가 그래서 이런 내용들을 담는 것!???
   • 통신 제어
   • 인증
   • 캐싱
   • 데이터 형식
7. 추가적으로 알아낸 것: node.js v18부터 fetch가 실험적, 21에서는 stable
   • https://nodejs.org/en/blog/announcements/v18-release-announce
   • https://nodejs.org/en/blog/announcements/v21-release-announce
8. 끝

 

TODO: axios의 Interceptor

요청 전, 응답 후에 추가적인 로직 삽입

(1) 요청 인터셉터

(2) 응답 인터셉터