HTTP ERROR 431

프로젝트를 진행하면서 로그인 할때 HTTP ERROR 431로 아래와 같은 에러 문구가 나왔다.

확인해보니 로그인 후 사용자의 프로필 이미지를 변경하고 다시 같은 계정으로 로그인할 경우에 나타나는 에러였다.

---

HTTP ERROR 431

로그인 쿠키로 저장되는 세션 헤더에서 기존에 프로필 이미지(base64)가 변경된 후 다시 재로그인 등 세션을 확인하면 헤더가 너무 커지면서 431 오류 발생
RESPONSE_HEADER_IS_TOO_BIG

위 에러의 내용을 찾아보고 원인을 알아보면 현재 사용자 프로필 이미지를 base64로 인코딩하는데 이때 이미지의 파일 크기가 크면 인코딩한 문자열의 길이도 길어지게되고 이 부분이 쿠키에 저장되면 쿠키의 크기 제한을 초과하기 때문에 발생하는 에러였다.

해결

이미지 관리를 base64로 인코딩하는 방식에서 이미지 파일의 경로를 URL 형태로 저장하는 방식으로 supabase storage 활용하여 해결했다.
supabase storage를 선택한 이유는 인프런에서 next + supabase에 대해 강의를 듣고있었으며 무료로 간편하게 이미지를 url로 저장하려고 선택했다. 물론 firebase storage도 무료이지만 1GB이고 supabase storage는 5GB 였다.

// profile action
export async function supabaseUploadImage(doc: string, formData: FormData) {
  const file = formData.get("file") as File;
  const fileName = nanoid();

  try {
    const { error } = await supabase.storage
      .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET!)
      .upload(`${doc}/${fileName}`, file);

    if (error) {
      return { state: false, message: "이미지 파일이 업로드 되지않았습니다." };
    }

    const { data } = supabase.storage
      .from(process.env.NEXT_PUBLIC_STORAGE_BUCKET!)
      .getPublicUrl(`${doc}/${fileName}`);

    return { state: true, result: data.publicUrl };
  } catch (error) {
    return { state: false, message: "이미지 업로드에 실패했습니다." };
  }
}

위처럼 profile action 폴더에 수파베이스 업로드 함수를 만들어서 사용자의 프로필 이미지와 스터디 개설할때 썸네일 이미지를 업로드 할때 url경로를 가져와서 mongoDB에 넣어 이미지를 관리했다.

supabase storage 이미지 업로드 정리글

---

1. 특정 계정 로그인 세션 쿠키 여러개 찍히는 에러 HTTP Error 431.
2. 프로필 이미지를 base64로 인코딩하여 저장하면 문자열이 길어지게 되고 쿠키의 최대크기를 초과하여 발생하는 에러
3. 그래서 문자열 방식이 아닌 supabase storage 활용하여 이미지 업로드를 통해 생성된 URL을 활용하면 쿠키 최대크기를 초과하지않기 때문에 에러 해결