[axios] defaults 설정 방법 및 옵션

Axios의 defaults 설정은 Axios를 전역으로 구성하기 위한 설정이며, 일반적으로 애플리케이션의 진입점 파일이나 Axios 인스턴스를 생성하기 전에 설정되어야 합니다. 주로 프로젝트의 초기화 코드 또는 설정 파일에서 이 설정을 구성합니다.

 

- 설정 위치

• 애플리케이션 진입점 파일 (Main Entry Point) (예: main.js)

만약 Vue.js, React, Angular 등의 프레임워크 또는 라이브러리를 사용하는 경우, 애플리케이션의 진입점 파일에서 Axios의 defaults 설정을 수행하는 것이 일반적입니다.

// main.js

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

Vue.prototype.$axios = axios; // Vue 인스턴스에서 axios를 사용할 수 있도록 설정

axios.defaults.baseURL = 'http://localhost:8081/base'; // 기본 URL 설정

const app = createApp(App);
app.mount('#app');

이렇게 하면 애플리케이션 전체에서 Axios의 defaults 설정이 적용됩니다.

• 설정 파일 (예: config.js)

Axios의 defaults 설정을 별도의 설정 파일에서 관리하고 가져오는 방법도 있습니다.
config.js 파일을 생성하고 Axios 설정을 이 파일에서 수행하고, 애플리케이션 진입점 파일에서 config.js를 가져와 사용할 수 있습니다.

// config.js

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8081/base';

export default axios;

 

- 사용

axios.defaults.baseURL = 'http://localhost:8081/base';

예를 들어, 아래와 같이 url을 설정하면 실제로 요청을 보내는 주소는

http://localhost:8081/base/api/test 입니다.

let url = 'api/test';
await axios
  .post(url, data)
  .then(response => {
    callback(response.data);
  })
  .catch(error => {
    let result = {};
    result.result = 'Fail';
    return result;
  });

 

- 옵션

• axios.defaults.baseURL: Axios의 기본 URL을 설정합니다. 이 URL은 모든 요청의 기본 URL 접두사로 사용됩니다. 예제에서는 CANAPE_SERVER와 CANAPE_PORT 변수를 이용하여 기본 URL을 동적으로 설정하고 있습니다.
• axios.defaults.headers.post['Content-Type']: POST 요청의 기본 컨텐츠 타입을 설정합니다. JSON 형식의 데이터를 전송하려면 'application/json;charset=utf-8'로 설정합니다.
• axios.defaults.headers.post['Access-Control-Allow-Origin']: 브라우저에서 보내는 요청에 대한 Cross-Origin Resource Sharing (CORS) 헤더를 설정합니다. '*'로 설정된 경우, 모든 도메인에서 요청을 허용합니다. 이는 개발 중에 주로 사용되며, 프로덕션 환경에서는 더 엄격한 제어가 필요할 수 있습니다.
• axios.defaults.withCredentials: Axios 요청에 대한 인증 정보(쿠키 등)를 서버로 전달할지 여부를 설정합니다. true로 설정된 경우, 인증 정보를 포함한 요청을 서버로 보냅니다.
• axios.defaults.headers.common: 모든 요청에 공통적으로 적용되는 헤더를 설정합니다. 예를 들어, 인증 토큰을 모든 요청에 추가하는 경우에 사용될 수 있습니다.
• axios.interceptors: Axios의 인터셉터를 사용하여 요청과 응답을 중간에서 가로채고 수정할 수 있습니다. 예를 들어, 요청 전에 인증 토큰을 추가하거나 응답을 처리할 수 있습니다.
• axios.defaults.timeout: 요청에 대한 타임아웃을 설정합니다. 지정된 시간 내에 응답이 오지 않으면 요청이 실패합니다.
• axios.defaults.validateStatus: 응답 상태 코드를 유효성 검사하는 함수를 정의합니다. 이 함수를 사용하여 특정 상태 코드 범위 내에서만 요청을 성공으로 처리하거나 실패로 처리할 수 있습니다.