axios

[Axios] Axios 인터셉터 적용하기

2023.05.10

인터셉터(Interceptors)란? then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다. Axios 인터셉터를 적용하려는 이유❓ 토이 프로젝트를 진행하면서 서버에 토큰 인증을 필요로 하는 API 요청을 할때마다 HTTP Authorization 요청 헤더에 토큰을 넣어줘야하고 401(Unauthorized) 에러가 서버로부터 들어오면 토큰을 갱신해준 후 재요청을 보내는 과정을 한 곳에서 모두 처리하여 중복 코드를 제거하고 유지보수성을 향상시키기 위해 Axios 인터셉터를 적용하기로 했다. 사용자 지정 config로 새로운 Axios 인스턴스를 생성하여 사용하니 더욱 편리했다. (baseURL, timeout 설정) 적용하는 과정 1) Axios 인스턴스 생성 const instanc..

Frontend/React

[React/Axios] axios delete 요청 시 body에 data 넣는 방법

2022.10.20

🚨 오류 발생 AxiosError message: 'Request failed with status code 400' axios.delete(`${url}/unlike`, { projectId: id, }) axios의 delete를 사용하여 서버에 요청을 할 때, 다음과 같이 data를 전달하면 오류가 발생한다. 💡 해결 방법 axios.delete는 request body를 지원하며 다음과 같이 두개의 매개변수를 허용한다. axios.delete(url[, config]) 👍 config.data는 request body를 설정하는데 사용할 수 있다. axios.delete(`${url}/unlike`, { data: { projectId: id, }, }) 2번째 인자에서 data를 data: {}..

[Axios] Axios 인터셉터 적용하기

[React/Axios] axios delete 요청 시 body에 data 넣는 방법

티스토리툴바