18. axios로 API 요청시 보낼 기본정보 설정하기

Vue.js와 Quasar에서 Axios를 사용하여 API 요청 시마다 일관된 Header를 설정하려면 Axios의 인스턴스를 생성하고 해당 인스턴스에 기본 설정을 추가할 수 있습니다. 이를 통해 모든 요청에서 동일한 설정을 사용할 수 있습니다.

아래는 Quasar와 Vue.js에서 Axios를 사용하여 Header에 sessionId를 추가하는 예제입니다:

1. Axios 인스턴스 생성: axios.js와 같은 파일을 생성하여 Axios 인스턴스를 만듭니다.이렇게 하면 $axios를 사용하여 API 요청을 할 수 있게 됩니다.
2. javascriptCopy code
   // src/boot/axios.js import axios from 'axios'; const axiosInstance = axios.create({ baseURL: process.env.VUE_APP_API_URL, // API의 기본 URL 설정 headers: { 'Content-Type': 'application/json', // 다른 공통 헤더들도 필요에 따라 추가할 수 있습니다. }, }); // 세션 ID 설정 const sessionId = 'your_session_id'; axiosInstance.defaults.headers.common['sessionId'] = sessionId; export default ({ Vue }) => { Vue.prototype.$axios = axiosInstance; };
3. Quasar 설정: Quasar 애플리케이션에서 생성한 Axios 인스턴스를 사용하도록 quasar.conf.js 파일에 추가합니다.이제 Vue 컴포넌트에서 $axios를 사용하여 API 요청을 보낼 때, 설정된 헤더가 포함된 요청이 전송됩니다.
4. javascriptCopy code
   // quasar.conf.js return { // ... boot: [ 'axios', ], // ... }

이렇게 하면 모든 API 요청에서 기본적으로 설정한 헤더가 사용되며, 세션 ID를 함께 보낼 수 있습니다.