axios.defaults
axios.defaults.headers.origins = "http://localhost:4000"이런 구문을 마주쳤는데 axios.default가 무엇인지 몰랐다. 프론트를 다룰 때 가끔씩 Axios를 사용하고는 했지만 이런 식으로 사용한 적은 없었기 때문이다.
모든 요청에 적용될 구성 기본(Config Defaults) 값을 지정할 수 있습니다.
= https://yamoo9.github.io/axios/guide/config-defaults.html
공식 문서를 번역한 문서에 따르면 전역 변수로 설정하는 방식인듯 하다. 다른 방식으로는 아래와 같이 생성할 수도 있는 모양이다.
// Set config defaults when creating the instance
const instance = axios.create({
baseURL: 'https://api.example.com'
});
// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;그치만 단순히 전역 변수를 선언하다기에는 defaults 이후로 이어지는 프로퍼티가 어떤 역할이 있을 것 같다. 또한 defaults에 값을 선언해 놓은 후 어떻게 사용되는 것인지 잘 모르겠다.
여러 블로그를 검색한 결과 defaults값을 설정하면 axios의 configuration에 그 값을 사용할 수 있는 모양이다. baseURL같은 경우에는 기본 URL로 작동해서 axios.get("")에 기본 URL을 제외한 뒷부분 만을 넣어도 된다는 식이다.
모든 요청에 적용되는 설정의 default 값을 전역으로 명시할 수 있다.
주로 서버에서 서버로 axios를 사용할때 요청 헤더를 명시하는데 자주 쓰인다.
=출처: https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9
나중에 내가 직접 백엔드나 프론트엔드를 구현하가면서 적용해 봐야겠다.
express 네이밍 특징
express의 미드웨어를 통한 받은 req,res의 이름은 req[미들웨어]/ res[middleware]의 형태로 구현되는 듯하다.
그래서 cookie-parser라던가 body-parser라던가 session등이 미들웨어를 거처서 해당 req/res 오브젝트의 property로 소속되는 듯하다.
CORS
Browser와 server의 도메인이 일치하지 않으면 기본적으로 요청이 차단된다고 한다. 그리고 이를 CORS 문제라고 한다.
CORS
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
= https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
처음에 책에서 "도매인이 일치하지 않는다는 말" 을 읽었을때 이해가 안됐다. 왜냐하면 (1) 책을 대충 읽어서였고 (2)도매인 주소가 다르기 때문이라고 했는데 도매인에 대한 이해가 부족했기 때문이다.
(그러나 여전히 localhost:4000과 localhost:8000을 도매인 주소가 다르기 때문이라는 말은 이해가 되지 않는다. origin이 다르다고 표현했다면 더 낫지 않았을까)
도메인은 위의 이미지의 설명대로 www.codns.com까지를 가리킨다. 그리고CORS를 구성하는 단어인 Origin은 protocol, host와 domain, 그리고 portnumber을 포함한다고 한다(출처:CORS는 왜 이렇게 우리를 힘들게 하는걸까?).
이 CORS 문제는 또한 Origin의 일치가 되지 않는 상황에서 Brower와 Server사이에서만 발생한다. Sever와 Server 사이의 통신에서는 발생하지 않는다고 한다. 브라우저가 origin이 다른 경우 자체적으로 차단하는 기능을 가졌기 때문에 그렇다. 이 부분을 간과한 게 이해를 막는 또 다른 이유였다.
CORS 문제를 해결하기 위해서는 응답에 Access-Control-Allow-Origin 헤더를 추가하면 된다. 이를 보다 편리하게 해결하기 위해서 cors 패키지를 미들웨어로 사용할 수 있다.
남는 문제
그럼
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>같은 경우에는 왜 cors가 일어나지 않을까?
자체적으로 cors에 대한 해결을 하나? 서버와 서버의 작용인걸까?
Access-Control-Allow-Origin을 헤더에 포함시켜서 보내주는 것일까?
참고
