const instance: AxiosInstance = axios.create({
  // baseURL:
  //   process.env.NODE_ENV === 'localhost'
  //     ? process.env.VUE_APP_REMOTE_LOCAL_API_HOST
  //     : '',
  headers: {
    'Content-type': 'application/json',
    'Access-Control-Allow-Origin': '*',
  },
});

const instance: AxiosInstance = axios.create({
  // baseURL: 'v1/bootfactory/api',
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-type': 'application/json',
    Authorization: '',
  },
});

• baseURL

  • 통신할 서버 URL 기본값이다.
  • 해당 값을 설정해놓으면 통신할 때마다 URL 기본 값은 넣어주지 않아도 되며, 기본 URL 뒤에 필요한 URL 값만 할당해주면 된다.

• headers

  • Content-Type

    • Content-Type 옵션은 HTTP 요청 또는 응답에서 전송되는 데이터형식을 나타내는 헤더이다.

      'Content-type': 'application/json',
      

      요청의 본문 데이터나 응답의 데이터가 JSON 형식으로 전달됨을 나타낸다.

      서버의 JSON 형식의 데이터를 전송하거나, 서버로부터 JSON 형식을 응답 받을 때 사용된다.

    • Content-Type 값들

      • "application/json": JSON 형식의 데이터를 나타냅니다.
      • "application/xml": XML 형식의 데이터를 나타냅니다.
      • "application/x-www-form-urlencoded": 웹 폼 데이터를 인코딩한 형식으로, 일반적으로 HTML 폼을 통해 전송되는 데이터를 나타냅니다.
      • "multipart/form-data": 파일 업로드와 같은 멀티파트(form-data) 형식의 데이터를 나타냅니다.
      • "text/plain": 일반 텍스트 데이터를 나타냅니다.
      • "image/jpeg", "image/png", "image/gif": 이미지 파일을 나타내는 MIME 타입입니다.
      • "audio/mpeg", "audio/wav", "audio/ogg": 오디오 파일을 나타내는 MIME 타입입니다.
      • "video/mp4", "video/quicktime", "video/webm": 비디오 파일을 나타내는 MIME 타입입니다.
  • Access-Control-Allow-Origin

    • Access-Control-Allow-Origin 옵션은 Cross-Origin Resource Sharing(CORS) 기능을 사용할 때 클라이언트가 접근할 수 있는 출처(Origin)를 지정하는 헤더이다.

      'Access-Control-Allow-Origin': '*',
      

      “*"로 설정되어 있으므로, 서버는 모든 출처에서의 접근을 허용하고 응답을 반환할 수 있다.

    • CORS는 웹 브라우저에서 실행되는 JS 코드에서 다른 도메인의 리소스에 접근할 때의 보안 정책을 관리하는 메커니즘이다. 보안 상의 이유로 브라우저에서는 동일 출처 정책(Same-Origin Policy)을 적용하여 스크립트가 다른 출처의 리소스에 접근하는 것을 제한한다.

      그러나 CORS 정책을 이용하면 서버가 특정 출처에서의 접근을 허용할 수 있으며, 이를 통해 클라이언트의 요청을 처리하고 응답을 반환할 수 있다.