내일배움캠프 TIL 46일차

발표 3시간 전 merge한 main을 각자 pull받았을 때 났던 에러
post 요청 시 Unauthorized에러가 났었다.

시도: admin과 관련된 뷰와 인증관련 코드들을 찾아보았다.
해결

async function createRoom() {
  const accessToken = localStorage.getItem('access') // <= 추가! 
  const name = document.getElementById("name").value;
  const max_members = parseInt(document.getElementById("max_members").value);
  const spot = document.getElementById("spot").value;
  const status = document.getElementById("status").value;
  const price = parseInt(document.getElementById("price").value);
  const description = document.getElementById("description").value;
  const img = document.getElementById("img");


  const formData = new FormData();
  formData.append("name", name,);
  formData.append("max_members", max_members);
  formData.append("spot", spot);
  formData.append("status", status);
  formData.append("price", price);
  formData.append("description", description);
  formData.append("image", img.files[0]);


  response = await fetch(`http://127.0.0.1:8000/manager/rooms/`, {
    headers: {
      'Authorization': `Bearer ${accessToken}` 
    },     // <= 추가 !! 
    method: 'POST',
    body: formData
  })

    .then(response => response.json())

    .then(data => {
      const nameError = data.name[0] || null;
      const maxMembersError = data.max_members[0] || null;
      const descriptionError = data.description[0] || null;
      const priceError = data.price[0] || null;

      if (nameError && maxMembersError && descriptionError && priceError) {
        const errorMessage = `Name Error: ${nameError}\nMax Members Error: ${maxMembersError}\nDescription Error: ${descriptionError}\nPrice Error: ${priceError}\n`;
        alert(errorMessage);
      }
      else {
        alert("객실이 등록되었습니다.");
        window.location.reload();
      }
    })

token 로그인 방식을 사용하는데 access값을 가져와서 저장하지 않아서 발생했던 오류 
위 코드에서 
const accessToken = localStorage.getItem('access') 코드와
headers 부분이 빠져있어서 추가하니 post가 정상적으로 전달되고 save도 되었다.