24.01.18) TIL

최종 프로젝트 프론트 작업 - 게시글 작성 코드를 만들었는데, 포스트맨은 같은 url임에도 불구하고 브라우저에서는 게시글 작성이 되지 않는 문제가 있었다.

 

  const requestData = {

      postTitle: postTitle,

      postContent: postContent,

    };

    try {

      const accessToken = localStorage.getItem('accessToken');

      const refreshToken = localStorage.getItem('refreshToken');

      if (!accessToken) {

        console.error('액세스 토큰이 없습니다.');

        alert('로그인하고 이용해주세요');

        navigate("/");

        return;

      }

      const formData = new FormData();

      formData.append('requestDto', new Blob([JSON.stringify(requestData)], { type: "application/json" }));

      const response = fetch('http://localhost:8080/api/posts?gameType=PC_GAME&gameName=LEAGUE_OF_LEGEND&boardName=FREE_BOARD', {

        method: 'POST',

        body: formData,

        headers: {

          'Content-Type': 'multipart/form-data',

          'Access': `${accessToken}`,

          'Refresh': `${refreshToken}`,

        },

      }).then(response => {

        if (response.ok) {

          handleSuccess();

        } else {

          handleFailure();

        }

이런식으로 보내면 requestDto가 전부 multipart/form-data로 가기 떄문에 오류가 발생한거였다,

content-type을 지워주니 잘 작동하였다.(거의 8시간 가까이 이 문제와 싸웠다.)

 

요청헤더를 보면 아래처럼 바운더리가 되어있어서 원하는 부분만 multipart/form-data로 변환해주었다.