HTTP 401(Unauthorized) error에 따른 해결책

status code 401(Unauthorized)

• 의미:
  이 클라이언트 오류 상태 응답 코드는 리소스를 접근할 자격이 없다는 뜻이다. 그래서 요청이 받아들여지지 않고 에러가 뜬 것이다

  401 Unauthorized 클라이언트 오류 상태 응답 코드는 해당 리소스에 유효한 인증 자격 증명이 없기 때문에 요청이 적용되지 않았음을 나타냅니다.
  출처: https://developer.mozilla.org/ko/docs/Web/HTTP/Status/401

• 원인: API key를 잘못 적용했기 때문이다.
• 상황:
  협업 프로젝트에서 팀원들과 모두 merge했는데 위와 같은 에러가 떴다. 특이했던 것은 코드가 모두 동일함에도 불구하고 한 팀원은 잘 작동했지만 나머지 팀원들은 에러가 났던 것이다. 이런 상황에서 에러 원인있던 코드 부분을 살펴보았더니 fetch로 API 호출하는 부분이었다. fetch 자체가 문제일 수 있을 것 같아 Axios로 호출했지만 아래와 같은 401 에러가 발생했다. 이를 통해 401 에러, 즉 접근 권한 에러가 발생했다는 것을 깨달은 이후 코드에 어떤 부분이 접근 권한 에러를 발생할 수 있을지를 고심해보았다. 코드상 권한 관련 부분은 API key밖에 없어서 코드를 더 유심히 보니 API key를 보호하기 위한 환경 변수명이 문제였다. 한 팀원이 API key에 대한 환경 변수명을 달리 했던 것이다. Next.js로 작업했던 우리 팀은 환경 변수들, 특히 API key를 env.local에 저장했지만 이 파일은 .gitignore 파일에 속해있기 때문에, 즉 깃허브에 올라가지 않기 때문에 merge할 때도 통일을 할 수가 없었다. 이후 환경 변수 명을 바꿨더니 접근 권한 에러가 해결되었다. 코드는 다음과 같다.

//fetch로 호출 (에러 발생)
const { results: trending } = await (
    await fetch(
      `${BASE_URL}/trending/movie/day?api_key=${process.env.API_KEY}&language=ko&include_adult=true`
    )
  ).json();

//Axios로 호출 (에러 발생)
  const res = await axios.get(
    `${BASE_URL}/trending/movie/day?api_key=${process.env.API_KEY}&language=ko&include_adult=true`
  );
  const trending = res.data.results;

//해결 후 (axios든, fetch로 하든 환경 변수명만 바꾸면 잘 작동함)
const { results: trending } = await(
    await fetch(
      `${BASE_URL}/trending/movie/day?api_key=${process.env.NEXT_PUBLIC_API_KEY}&language=ko&include_adult=true`
    )
  ).json();