백엔드와 API 통신 시 헤더 오류

평일은 플젝,주말엔 알바를 하다보니 블로그를 쓸 시간이 없었는데

억울해서 좀 써야할 거 같아 남긴다. (백엔드분 잘못은 절대 아니다!)

우리 플젝은 음식모임을 생성->만남을 위한 플젝이다.

그럼 모임생성이 빨리 되어야하고 내가 그 역할을 맡게 되었다.

 

스웨거에서 제공 된 형식과 맞췄고 multipart/form-data으로 보냈다.

그런데 자꾸 500에러가 뜨는 걸까?

 

headers 부분에 쿠키도 따로 넣어보고

credentials 값도 계속 변경해보고 했다.

- omit (기본,쿠키 미전송) , include(쿠키 항상전송) , same-origin 쿠키를 동일출처 요청에만 전송

왜냐면 콘솔로 찍혔을 땐 쿠키가 값이 잘들어왔다.

(accessToken=쿠키값)이라고 한다면, 쿠키값만 정확히 콘솔에 찍혔기 때문이다.

3시간을 썼다. 쿠키로 이렇게 고통받은 게 처음이었다.

오늘 나는 칙촉도 싫어질 뻔했다.

 

 

브라우저 개발자도구(cmd+F12) -> Network 탭 -> Headers를 확인 해보았다.

이 놈이었다.

Authorization에서 undefined가 뜨는 것이다...!

 



아무래도 자바스크립트 내장메소드를 이용한 작업이 선언 ->초기화 -> 값 할당 단계에서

초기화(undefined 할당)까지만 되었다 생각하였다. (근데 왜 const인데 undefined가 뜰까? 생각했지만)

try부분 거의 최상단에 위치시켰다.

 

아니다 근데 내가 accesstoken을 token이라고 써놓았던 것이다.

쿠키 대신 오타 낸 내가 너무 미웠다.

// 제출 핸들러
export const handleSubmit = async (

//부분 생략

  try {
    // 환경 변수에서 API URL 가져오기
    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
    const cookies = document.cookie;
    const token = cookies
      .split("; ")
      .find(row => row.startsWith("accessToken=")) // `token` 쿠키를 가져옴
      ?.split("=")[1];
    if (!baseUrl) {
      throw new Error("NEXT_PUBLIC_BASE_URL 환경 변수를 설정하세요!");
    }

    const response = await fetch(`${baseUrl}/gatherings`, {
      method: "POST",
      body: formDataToSend,
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });

//부분 생략
};