fetch를 통해 요청을 날릴때 headers는 쓰지 않기

 

fetch를 통해 post요청을 날리려고 할때 

const fileInput = document.querySelector('#your-file-input') ;
const formData = new FormData();

formData.append('file', fileInput.files[0]);

const options = {
  method: 'POST',
  body: formData,
  // header를 아래처럼 셋팅하면 안된다고 한다
  // headers: {
  //   'Content-Type': 'multipart/form-data',
  // }
};

fetch('your-upload-url', options);

 

 

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIn312MOjBWdkffIM

올바른 boundary를 설정하려면 명시적으로 'Content-Type' 헤더를 삭제해야 한다.

이 경우 브라우저가 올바른 'boundary'와 함께 자동으로 설정한다.

 

다음 줄을 추가하면 문제가 해결된다. 

 

// 브라우저가 올바른 'boundary'와 함께 추가할 수 있도록 'Content-Type' 헤더를 삭제하기

delete options.headers['Content-Type'];

 

boundary는 multipart/form-data 형식에서 각 필드 데이터의 구분자(delimiter) 역할을 한다.

 

이 구분자는 서버가 요청에서 각 필드의 데이터가 어디서 끝나고 다음 필드의 데이터가 어디서 시작하는지를 알 수 있게 해준다.

GET 요청에서의 '&'와 비슷한 역할을 한다.

 

boundary는 일반적으로 브라우저가 자동으로 생성해주기 때문에 직접 정의할 필요가 없다.

브라우저는 multipart/form-data 형식으로 요청을 보낼 때 각 필드를 구분하기 위한 boundary 값을 자동으로 생성한다.

서버에서 헤더를 삭제해야 하는 이유는, multer 미들웨어를 사용하고 있기 때문

 

 

multer는 multipart/form-data 형식의 요청을 처리하기 위한 미들웨어로, 요청을 해석하고 각 필드의 데이터를 추출한다.

이 과정에서 요청의 헤더가 변경될 수 있으며, 따라서 클라이언트에서 서버로 전송한 헤더 정보는 의미가 없어지므로 삭제된다.

결론적으로, multipart/form-data 형식으로 데이터를 전송할 때는 boundary를 자동으로 생성하고,

서버에서는 요청의 헤더를 삭제하여 요청을 올바르게 처리할 수 있도록 하는 것

 

 

[원문] https://muffinman.io/blog/uploading-files-using-fetch-multipart-form-data/

Uploading files using 'fetch' and 'FormData'