특정 페이지에서 401 Unauthorized 에러

REST API
1

문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.

안녕하세요, 특정 페이지에서만 401
"자격 인증데이터(authentication credentials)가 제공되지 않았습니다.가 뜨는 이유가 무엇일까요?

검색해보니, 토큰을 갱신하라고 나와있던데 그럼 로그인과 특정 api에서는 왜 문제가 없이 잘 작동되는건지도 궁금합니다.

const ProductAPI = () => {
  const token = useRecoilValue(userToken);

  const fetchproducts = useCallback(async () => {
    let authorizationToken;

    if (localStorage.getItem("kakaoToken")) {
      authorizationToken = `Bearer ${localStorage.getItem("kakaoToken")}`;
    } else {
      authorizationToken = `JWT ${token}`;
    }
    console.log(authorizationToken);

    try {
      const res = await fetch(`${URL}/products/`, {
        method: "GET",
        headers: {
          Authorization: authorizationToken,
        },
      });
      const data = await res.json();
      return data;
    } catch (error) {
      console.error("product api 오류", error);
    }
  }, [token]);

  return { fetchproducts };
};

export default ProductAPI;

위 api에서는 정상적으로 통신이 되는데

const GetCartAPI = () => {
  const token = useRecoilValue(userToken);

  const fetchCartItem = useCallback(async () => {
    let authorizationToken;

    if (localStorage.getItem("kakaoToken")) {
      authorizationToken = `Bearer ${localStorage.getItem("kakaoToken")}`;
    } else {
      authorizationToken = `JWT ${token}`;
    }
    console.log(authorizationToken);
    try {
      const res = await fetch(`${URL}/cart`, {
        method: "GET",
        headers: {
          Authorization: authorizationToken,
        },
      });

      const result: CartItemsType = await res.json();
      return result;
    } catch (error) {
      console.error("api error", error);
      throw error;
    }
  }, [token]);

  return  fetchCartItem ;
};

export default GetCartAPI;

아래 api를 포함한 특정 api에서는 401 Unauthorized가 뜹니다.

로직도 거의 비슷한데, 왜 특정페이지에서만 안되는지 궁금합니다.

ID 986108

2

안녕하세요.

해당 오류가 카카오로 부터 발생하는 오류가 맞을까요?
맞으시다면 사용한 API를 제공 부탁드립니다.

코드상으로는 카카오가 아닌 서비스측 API 호출 시, JWT 토큰이 아닌 Bearer 토큰이 전달될 때, 오류 발생하시는 것으로 보이며, 이는 서비스측 인증 로직에 의한 것으로 보입니다.