axios headers의 "Content-Type"에 대해

React에서 서버와 통신을 하기위해 주로 axios를 많이 사용하곤합니다. 저 또한 axios를 활용해 서버와 통신하기 위해 axios를 사용하였습니다.

import axios from "axios";

const BASE_URL = "비밀";

export const instance = axios.create({
  baseURL: BASE_URL,
  headers: {
    "Content-Type": "application/json",
  },
});

// axios.js

위와 같이 axios.js라는 파일을 따로만들었고 .create() 메서드를 활용해 axios 인스턴스를 생성해주었습니다. 인스턴스를 생성하는 과정에서 URL은 필수요소이고 나머지 속성은 옵션입니다. 또한 method가 지정되지 않으면 요청은 GET으로 기본 설정이 됩니다. 또한 사용가능한 인스턴스 method는 아래와 같습니다. (Axios 러닝 가이드를 참고하였습니다.)

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.delete(url[, config])
axios.request(config)
axios.head(url[, config])
axios.options(url[, config])
axios.getUri([config])

본론으로 돌아와 코드를 작성하던 중 header의 "Content-Type" 에 대해 궁금해져서 구글링도 해보고 지인에게 질문도 해보았는데 지인께서 fetch와 axios의 가장 큰 차이가 fetch의 경우 데이터를 받아오는 구조가 json이 아니라는 점이 가장 크다 라고 말씀해주시더라구요.

그러면서 application/json 형태의 content-type은 origin이 동일하거나 다른 경우에도 whitelist로 등록된 경우에만 가능하다고도 말씀해주셨습니다. 그렇지 않은경우에는 cors에러가 발생하구요. 그래서 application/json으로만 데이터를 전달해주는 api의 경우 fetch를 사용하면 모든 origin에 대해 whitelist 등록을 해줘도 cors에러가 발생한다고 합니다.

아직 사실 무슨말인지 잘 이해가 되지는 않습니다.. 기록용으로 적어두고 공부를 좀 더 한뒤에 글을 좀 수정해보도록 하겠습니다.

하지만 궁극적인 궁금점인 content-type에 대해 axios로 데이터를 받아올때는 header의 config설정으로 application/json을 기본으로 해주고 받아오고자 하는 데이터의 타입에따라 이를 바꾸어줄수도 있습니다.

그래서 내가 받아오고자 하는 타입이 예를들어 이미지와 동영상같은것이면 content-type을 multipart/fomrData와 같이 설정해줄수도 있습니다.

type ContentType = AxiosHeaderValue | 'text/html' | 'text/plain' | 'multipart/form-data' | 'application/json' | 'application/x-www-form-urlencoded' | 'application/octet-stream';

위와 같이 여러가지 타입이 있는것같습니당.

또 내가 만든 인스턴스를 header가 필요없는 경우에도 사용하여도 상관이 없는것인가? 에 대해 궁금증이 생겨 찾아보니 content-type이 서버 요구사항에 맞지 않는경우에도 서버와 통신하는 데는 전혀 문제가 없다고 합니다. 정리하자면 instance를 사용하여 기본적으로 설정된 헤더를 활용하면서 (이때 헤더가 필요없는 경우에도 사용하여도 무방함) 필요한 경우에는 특정 요청에 맞게 헤더를 추가 또는 변경할 수 있습니다.