프론트엔드 첫걸음

400 에러 발생 문제 해결 본문

로그/문제상황

400 에러 발생 문제 해결

차정 2023. 12. 18. 12:05

400에러가 발생했다.

 

400에러란?

https://developer.mozilla.org/ko/docs/Web/HTTP/Status/400

HyperText Transfer Protocol (HTTP) 400 Bad Request 응답 상태 코드는 서버가 클라이언트 오류(예: 잘못된 요청 구문, 유효하지 않은 요청 메시지 프레이밍, 또는 변조된 요청 라우팅) 를 감지해 요청을 처리할 수 없거나, 하지 않는다는 것을 의미합니다.

 

 

https://extrememanual.net/45867

클라이언트 측에서 요청 메서드(Method)가 잘못된 경우, 요청 헤더가 잘못된 경우, 요청한 본문 구문이 누락된 경우 등이 HTTP 400 Bad Request 오류의 원인이다. 

 

 

개발자도구를 뒤져보니 "Multipart: Boundary not found" 에러가 발생했다.

fetch로 요청보낼때 직접 설정해 준 header에 필요한 값이 없어서 생기는 오류로, 
header설정을 삭제하고, body에 FormData객체 담아 전송하면 알아서 빠진 값을 header에 채워서 보내준다.

   const response = await fetch(`${BASE_URL}/rating`, {
      method: 'POST',
    //  headers: { 'Content-Type': 'multipart/form-data' },
      body: formData,
    });

 

 

 

아래 블로그 보고 해결함.!

https://curryyou.tistory.com/466

 

[Node.js] Multer - fetch 파일 전송 에러: Error: Multipart: Boundary not found

# Multipart: Boundary not found 에러 해결 방법 - 클라이언트: fetch 를 통해 multipart/form-data 로 파일 전송 - 서버: Node.js에서 Multer를 통해 파일 업로드 처리 이 때, 아래의 에러가 발생할 수 있다. [에러 코

curryyou.tistory.com

 

 

 

 

 

 

https://extrememanual.net/45867

 

400 Bad Request 원인과 해결 방법 - 익스트림 매뉴얼

크롬을 비롯한 엣지, 웨일과 같은 크로미움 기반의 브라우저에서 웹사이트에 접속할 때 "400 Bad Request / Request Header Or Cookie Too Large" 메시지와 함께 웹페이지가 열리지 않는 경우가 발생합니다.

extrememanual.net

https://developer.mozilla.org/ko/docs/Web/HTTP/Status/400

 

400 Bad Request - HTTP | MDN

HyperText Transfer Protocol (HTTP) 400 Bad Request 응답 상태 코드는 서버가 클라이언트 오류(예: 잘못된 요청 구문, 유효하지 않은 요청 메시지 프레이밍, 또는 변조된 요청 라우팅) 를 감지해 요청을 처리

developer.mozilla.org