[CORS] fetch는 OK인데, axios에서만 CORS가 나요

요약해서 말하면, axios와 fetch의 기본 설정이 달라 같은 요청처럼 보여도 다른 처리가 되고 있기 떄문이다.

 

내 개발 환경에서는 Gateway가 api prefix를 붙여주는데, 여기에서 오류가 발생하고 있었다.

나는 내가 직접 prefix를 붙여주는 방식으로 해결했다.

1. Gateway로 API요청을 보내면, api path를 보고 사용자면 auth server로, project라면 project server로 요청을 보낸다.
2. 요청을 분기 쳐줄 때, api의 path에 api path의 prefix를 붙여준다.
   (ex. http://gateway-host.com/api/login -> http://auth-host.com/auth/api/login)
3. origin 주소가 요청한 내 주소(localhost) 가 아닌 gateway의 주소가 들어가 CORS가 발생했다.

 

 

fetch와 axios는 동작 방식이 다르다.

- 기본적으로 fetch는 정말 최소한의 설정만 되어 있고, 개발자가 필요한 것들을 커스텀해서 써야한다. 가볍다.

- axios 는 조금 더 편의성을 위해 자주하는 설정들이 추가되어 있다.

	fetch	axios
default Content-Type	보내지 않음 (필요할 때 개발자가 설정해주어야 함)	application/json → preflight 요청 발생
withCredentials		false (특정 설정에서는 true)

 

 

 

같이 보면 좋은 것들

[네트워크/HTTP] OPTIONS 메소드를 쓰는 이유와 CORS란? - 하나몬

 

Axios를 사용하면 왜 CORS 이슈가 생기는걸까?