[졸업작품 회고 -2] withCredential 403 Forbidden 해결

로컬 상태에서 모든 api를 호출할 때마다 403 Forbidden이 뜨는 에러가 발생했다.
백엔드에서는 http only 쿠키를 사용한다고 해서 클라이언트에서는 withCredential을 설정해서 보내주어야 했다.

https://securityinit.tistory.com/248
클라이언트에서는 위 글을 참고하여 apiClient.jsx를 작성했고, 모든 api에 withCredential을 붙여서 보낼 수 있도록 설정했다. + 401, 400에러를 캐치하여 액세스 토큰 재발급 및 리프레시토큰 만료시 로그아웃되도록 연결했다.

해결방법 (로컬)

export const apiClient = axios.create({
    baseURL: "/api",
    withCredentials: true  // ✅ 모든 요청에 쿠키 포함
});

baseURL에 /api가 붙어서 갈 수 있도록 설정했다.
api를 호출할 때는,

const response = await apiClient get ("/auth/refresh");

apiClient를 불러와서 뒤에 엔드포인트만 작성했다.

프록시 설정도 추가했다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://nsmaker.o-r.kr', // 백엔드 서버 주소 
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
        ws: true,
        configure: (proxy) => {
          proxy.on('proxyReq', (proxyReq, req) => {
            if (req.url?.includes('/sse/subscribe')) {
              proxyReq.setHeader('Accept', 'text/event-stream');
              proxyReq.setHeader('Cache-Control', 'no-cache');
              proxyReq.setHeader('Connection', 'keep-alive');
            }
          });
        }
      }
    }
  }
})

그리고 혹시 몰라 크롬 브라우저의 Third-party cookie를 허용했다.
이렇게 하면 개발자도구-쿠키에서 액세스토큰, 리프레시토큰까지 잘 오는 것을 확인할 수 있었다.

해결방법 (배포)

export const apiClient = axios.create({
    baseURL: import.meta.env.VITE_SERVER_URL,
    withCredentials: true  // ✅ 모든 요청에 쿠키 포함
});

배포시에는 baseURL만 수정하였다.

이렇게 했는데도 안되면 백엔드에서 문제가 일어난 것....
삼일을 골머리앓던 에러였는데 백엔드쪽에서 무엇인가 문제 해결 + 클라이언트 세팅으로 해결했다!