axiosInstance
- Axios 라이브러리를 사용하여 HTTP 요청을 보내기 위해 필요한 설정들은 모아둠!!
- 기본 URL과 요청 헤더 등을 포함하며, Axios를 통해 요청을 보낼 때 이 설정이 자동으로 적용됨
interceptors
- HTTP 요청이나 응답을 가로챈 후 수행!
- 요청을 보내기 전에 또는 서버에서 응답을 받은 후에 처리해야 하는 작업을 작성할 수 있음
- request 인터셉터를 사용하면 요청을 보내기 전에 요청 헤더를 수정하거나 인증 토큰을 추가할 수 있음
- response 인터셉터를 사용하면 서버로부터 온 응답을 가로채서 오류 처리나 응답 데이터의 변경을 수행할 수 있음
- 인증, 오류 처리, 로깅 등과 같은 작업을 처리하는 데 유용함
import axios from "axios";
// Axios 인스턴스를 생성 - 이 인스턴스로 HTTP 요청을 보낼 수 있음!
// 예시) axiosInstance.post
export const axiosInstance = axios.create({
// baseURL: 요청을 보낼 기본 URL을 설정!
// VITE_REACT_APP_URL 환경 변수로부터 값을 가져옴
baseURL: import.meta.env.VITE_REACT_APP_URL,
// headers: 요청 헤더에 포함할 내용을 설정!
// "Content-Type"을 "application/json"으로 설정함
headers: { "Content-Type": "application/json" },
// withCredentials: 요청과 관련된 인증 정보를 자동으로 처리하도록 설정
withCredentials: true,
});
// Axios 인스턴스에 요청 인터셉터를 추가
// 서버로 보내지기 전에 수행되는 부분!
axiosInstance.interceptors.request.use((config) => {
// localStorage에서 "accessToken" 값을 가져옴
const accessToken = localStorage.getItem("accessToken");
// 만약 "accessToken" 값이 존재한다면, 요청 헤더에 "Authorization" 헤더를 추가하고 해당 토큰을 설정!
if (accessToken) {
config.headers["Authorization"] = accessToken;
}
// 위에 적힌 요청 설정을 반환함!
return config;
});