프론트엔드에서 자바 메소드 호출시 400 에러가 뜹니다

Question

import axios from 'axios'; const BOARD_API_BASE_URL = "http://100.0.0.44:8080/api/board-reference"; class BoardReferenceService { getBoards(p_num) { return axios.get(BOARD_API_BASE_URL + "?p_num="+ p_num); } createBoard(formData) { return axios.post(BOARD_API_BASE_URL, formData, { headers: { 'Content-Type': 'multipart/form-data' } }); } updateBoard(no, formData) { return axios.put(BOARD_API_BASE_URL + "/" + no, formData, { headers: { 'Content-Type': 'multipart/form-data' } }); } getOneBoard(no) { return axios.get(BOARD_API_BASE_URL + "/" + no); } /*updateBoard(no, board) { return axios.put(BOARD_API_BASE_URL + "/" + no, board); }*/ deleteBoard(no) { return axios.delete(BOARD_API_BASE_URL + "/" + no); } checkPassword(postId, password) { return axios.post(BOARD_API_BASE_URL + "/check-password", { postId: postId, password: password }); } getReplies(no) { return axios.get(BOARD_API_BASE_URL + "/reply/" + no + "/replies"); } createReply(no, reply) { return axios.post(BOARD_API_BASE_URL + "/reply/"+ no, reply); } updateReply(rno, reply) { return axios.put(BOARD_API_BASE_URL + "/reply/reply-sel/" + rno, reply); } checkReplyPassword(postId, password) { return axios.post(BOARD_API_BASE_URL + "/reply/check-reply-password", { postId: postId, password: password }); } deleteReply(rno) { return axios.delete(BOARD_API_BASE_URL + "/reply/reply-sel/" + rno); } } export default new BoardReferenceService();import './Request.css'; import BoardReferenceService from './BoardReferenceService.js'; import React, { Component } from 'react'; import { Link } from 'react-router-dom'; class ReferenceRoomWriteComponent extends Component { constructor(props) { super(props); const location2 = (window.location.pathname).toString(); const no = location2.replace('/reference-write/', ''); if(no.includes('board_subject')){ no = no.split("?")[0]; } this.state = { board_number: no, title: '', name: '', phone: '', company: '', mail: '', content: '', created_time: '', updated_time: '', password: '', is_attached_1: '', file_id_1: '', file_path_1: '', is_attached_2: '', file_id_2: '', file_path_2: '', isPassword: false, isCreate: false } if(no.includes('create')) { this.state = { board_number: '', title: '', name: '', phone: '', company: '', mail: '', content: '', created_time: '', updated_time: '', password: '', is_attached_1: '', file_id_1: '', file_path_1: '', is_attached_2: '', file_id_2: '', file_path_2: '', isPassword: false, isCreate: true } } this.changePasswordHandler = this.changePasswordHandler.bind(this); this.changeTitleHandler = this.changeTitleHandler.bind(this); this.changeNameHandler = this.changeNameHandler.bind(this); this.changePhoneHandler = this.changePhoneHandler.bind(this); this.changeCompanyHandler = this.changeCompanyHandler.bind(this); this.changeMailHandler = this.changeMailHandler.bind(this); this.changeContentHandler = this.changeContentHandler.bind(this); this.createBoard = this.createBoard.bind(this); } componentDidUpdate(prevProps) { // 사용자가 글 수정 중에 다른 페이지로 이동했는지 확인 if (prevProps.create!== this.props.create && this.props.create === "create") { // 사용자가 글 수정 중에 다른 페이지로 이동했을 때 초기화 this.setState({ board_number: '', title: '', name: '', phone: '', company: '', mail: '', content: '', created_time: '', updated_time: '', password: '', is_attached_1: '', file_id_1: '', file_path_1: '', is_attached_2: '', file_id_2: '', file_path_2: '' }); } } changePasswordHandler = (event) => { this.setState({password: event.target.value}); } changeTitleHandler = (event) => { this.setState({title: event.target.value}); } changeNameHandler = (event) => { this.setState({name: event.target.value}); } changeCompanyHandler = (event) => { this.setState({company: event.target.value}); } changePhoneHandler = (event) => { this.setState({phone: event.target.value}); } changeMailHandler = (event) => { this.setState({mail: event.target.value}); } changeContentHandler = (event) => { this.setState({content: event.target.value}); } createBoard = async (event) => { event.preventDefault(); let formData = new FormData(); formData.append('board_number', this.state.board_number); formData.append('title', this.state.title); formData.append('name', this.state.name); formData.append('content', this.state.content); formData.append('created_time', this.state.created_time); formData.append('updated_time', this.state.updated_time); formData.append('password', this.state.password); formData.append('is_attached_1', this.state.is_attached_1); formData.append('file_id_1', this.state.file_id_1); formData.append('file_path_1', this.state.file_path_1); formData.append('is_attached_2', this.state.is_attached_2); formData.append('file_id_2', this.state.file_id_2); formData.append('file_path_2', this.state.file_path_2); // Append files to formData const files = document.querySelectorAll('input[type="file"]'); Array.from(files).forEach((file, index) => { formData.append(`files[${index}]`, file.files[0]); }); try { if (this.props.create === 'create') { BoardReferenceService.createBoard(formData).then(res => { alert('제출이 완료 되었습니다'); console.log('제출이 완료 되었습니다'); window.location.href = "/reference-list"; }); } else { BoardReferenceService.updateBoard(this.state.board_number, formData).then(res => { window.location.href = "/reference-list"; }); } } catch (error) { console.error("Error creating board:", error); } } componentDidMount() { // 기존 로직 유지 if (this.props.create === "create") { this.setState({ board_number: "", title: "", name: "", phone: "", company: "", mail: "", content: "", is_attached_1: "", file_id_1: "", file_path_1: "", is_attached_2: "", file_id_2: "", file_path_2: "" }); } else { // board_number이 정의되었는지 확인 if (this.state.board_number) { BoardReferenceService.getOneBoard(this.state.board_number).then((res) => { let board = res.data; this.setState({ board_number: board.board_number, title: board.title, name: board.name, phone: board.phone, company: board.company, mail: board.mail, content: board.content, created_time: board.created_time, updated_time: board.updated_time, password: board.password || '', is_attached_1: board.is_attached_1, file_id_1: board.file_id_1, file_path_1: board.file_path_1, is_attached_2: board.is_attached_2, file_id_2: board.file_id_2, file_path_2: board.file_path_2, isPassword:!!board.password }); }).catch(error => { console.error("Error fetching board data:", error); // Handle the error appropriately here }); } else { // board_number이 정의되지 않았을 때의 처리 console.error("board_number is not defined"); } } } deleteView = async function (e) { e.preventDefault(); // Prevent form submission if (this.state.board_number &&!isNaN(this.state.board_number)) { // Check if board_number exists and is a number if (window.confirm("정말로 글을 삭제하시겠습니까? 삭제된 글은 복구 할 수 없습니다.")) { try { await BoardReferenceService.deleteBoard(this.state.board_number); console.log("delete result => success"); // Clear input fields after successful deletion this.setState({ board_number: "", title: "", name: "", phone: "", company: "", mail: "", content: "", is_attached_1: "", file_id_1: "", file_path_1: "", is_attached_2: "", file_id_2: "", file_path_2: "", isPassword: false, isCreate: false }); // Redirect to reference-list page window.location.href = "/reference-list"; } catch (error) { console.error("Error deleting board:", error); alert("글 삭제가 실패했습니다."); } } else { // "취소" 버튼을 누른 경우 처리 로직 alert("글 삭제가 취소되었습니다."); } } else { alert("글 번호가 유효하지 않습니다."); } } changeCheckboxHandler = (event) => { // Update the checkbox state based on its current value this.setState({agreePrivacy: event.target.checked}); }; changePasswordCheckboxHandler = (event) => { // Update the checkbox state based on its current value this.setState({isPassword: event.target.checked}); }; render() { let handleFormSubmit = (event) => { event.preventDefault(); // event 객체를 인자로 받아 preventDefault 메소드를 호출합니다. if (!this.state.agreePrivacy) { alert("개인정보 수집 동의를 체크해주세요."); return; // Exit the function if the checkbox is not checked } this.createBoard(event); // event 객체를 createBoard 함수에 전달합니다. }; console.log(this.state.board_number+"1111111111111111111111111111"); let boardData = this.state.board_number? this.state : {}; return (

자료실

글번호	{boardData.board_number}
작성일	{boardData.created_time}
조회수	1
*제목
File 1	{this.setState({is_attached_1: e.target.files.length > 0, file_id_1: e.target.files[0].id, file_path_1: e.target.files[0].path})}} />
File 2	{this.setState({is_attached_2: e.target.files.length > 0, file_id_2: e.target.files[0].id, file_path_2: e.target.files[0].path})}} />
이름
개인정보 수집 동의
*내용

{!this.state.isCreate && }

); } } export default ReferenceRoomWriteComponent;ERRORRequest failed with status code 400 AxiosError: Request failed with status code 400 at settle (http://localhost:3000/static/js/bundle.js:69733:12) at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:68393:66) at Axios.request (http://localhost:3000/static/js/bundle.js:68894:41)package com.board.back.controller; import java.io.File; import java.io.IOException; import java.time.LocalDateTime; import java.util.List; import java.util.Map; import java.util.Optional; import org.apache.catalina.filters.CorsFilter; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.web.servlet.FilterRegistrationBean; import org.springframework.context.annotation.Bean; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; import org.springframework.web.ErrorResponse; import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.DeleteMapping; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.PutMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import com.board.back.exception.ResourceNotFoundException; import com.board.back.model.Board; import com.board.back.model.BoardReference; import com.board.back.repository.BoardReferenceRepository; import com.board.back.repository.BoardRepository; import com.board.back.service.BoardReferenceService; import com.board.back.service.BoardService; @CrossOrigin(origins = "*") @RestController @RequestMapping("/api/board-reference") public class BoardReferenceController { @Autowired private BoardReferenceService boardReferenceService; @Autowired private BoardReferenceRepository boardReferenceRepository; private final String uploadDir = "C:\work\files"; // get paging board # 페이징 처리를 할 수 있도록 수정 @GetMapping("") public ResponseEntity getAllBoards(@RequestParam(value = "p_num", required=false) Integer p_num) { if (p_num == null || p_num <= 0) p_num = 1; return boardReferenceService.getPagingBoard(p_num); } @PostMapping("") public ResponseEntity createBoard(@RequestParam("formData") Map formData) { System.out.println("Received formData: " + formData); // Debugging line to see the formData content String result = "upload-form"; try { // Process formData as needed // Example: Accessing a file MultipartFile file = (MultipartFile) formData.get("files"); // Assuming "files" is the key for the uploaded file if (!file.isEmpty()) { String filename = file.getOriginalFilename(); System.out.println("Uploading file: " + filename); String fullPath = uploadDir + filename; file.transferTo(new File(fullPath)); } } catch (IOException e) { System.err.println("Error uploading file: " + e.getMessage()); return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error uploading file: " + e.getMessage()); } return ResponseEntity.ok(result); } }package com.board.back.service; import java.io.File; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths; import java.time.LocalDateTime; import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Optional; import java.util.stream.Collectors; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Service; import org.springframework.web.multipart.MultipartFile; import com.board.back.model.Board; import com.board.back.model.BoardReference; import com.board.back.model.BoardReferenceFiles; import com.board.back.repository.BoardReferenceRepository; import com.board.back.repository.BoardRepository; import com.board.back.util.PagingUtil; import com.mysql.cj.util.StringUtils; import jakarta.transaction.Transactional; @Service public class BoardReferenceService { @Autowired private BoardReferenceRepository boardReferenceRepository; public int findAllCount() { return (int) boardReferenceRepository.count(); } // get paging boards data public ResponseEntity getPagingBoard(Integer p_num) { Map result = null; if (findAllCount() > 0) { PagingUtil pu = new PagingUtil(p_num, 10, 10); List list = boardReferenceRepository.findFromTo(pu.getObjectStartNum(), pu.getObjectCountPerPage()); pu.setObjectCountTotal(findAllCount()); pu.setCalcForPaging(); result = new HashMap<>(); result.put("pagingData", pu); result.put("list", list); } else { // 게시글이 없는 경우, 페이징 정보를 초기화합니다. result = new HashMap<>(); result.put("pagingData", new PagingUtil(1, 10, 10)); // 예시: 첫 페이지를 기본값으로 설정 result.put("list", Collections.emptyList()); // 빈 리스트를 반환 } return ResponseEntity.ok(result); } // get boards data public List getAllBoard() { return boardReferenceRepository.findAll(); } // create board /*public BoardReference createBoard(BoardReference boardReference) { boardReference.setCreated_time(LocalDateTime.now()); return boardReferenceRepository.save(boardReference); }*/ @Transactional public BoardReference createBoard(BoardReference boardReference, MultipartFile[] files) { boardReference.setCreated_time(LocalDateTime.now()); BoardReference savedBoard = boardReferenceRepository.save(boardReference); List fileEntities = new ArrayList<>(); for (MultipartFile file : files) { BoardReferenceFiles fileEntity = new BoardReferenceFiles(); fileEntity.setOriginal_name(file.getOriginalFilename()); fileEntity.setSave_name(file.getOriginalFilename()); fileEntity.setSize((int) file.getSize()); fileEntity.setCreated_time(LocalDateTime.now()); fileEntity.setUpdated_time(LocalDateTime.now()); fileEntity.setBoardReference(savedBoard); // Ensure this line is correctly associating the BoardReference with the BoardReferenceFiles fileEntities.add(fileEntity); } try { boardReferenceRepository.saveAll(fileEntities); } catch (Exception e) { // Log the exception for debugging purposes System.err.println("Error saving file entities: " + e.getMessage()); throw e; // Rethrow the exception or handle it appropriately } return savedBoard; } /*public ResponseEntity getBoard(Integer no) { try { Optional optionalBoard = boardRepository.findById(no); if (optionalBoard.isPresent()) { return ResponseEntity.ok().body(optionalBoard.get()); } else { // NotFound 예외를 던지지 않고, ResponseEntity를 사용하여 404 Not Found 응답을 반환 return ResponseEntity.notFound().build(); } } catch (Exception e) { // Log the exception for debugging purposes System.out.println(e.getMessage()); // Return a 500 Internal Server Error response return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null); } }*/ public Optional getBoard(Integer no) { return boardReferenceRepository.findById(no); } public ResponseEntity updateBoard(Integer no, BoardReference updatedBoard) { Optional optionalBoard = boardReferenceRepository.findById(no); if (!optionalBoard.isPresent()) { // Handle the case where the board does not exist // For example, throw a custom exception or return a specific response throw new ResourceNotFoundException("Not exist Board Data by no : [" + no + "]"); } BoardReference boardReference = optionalBoard.get(); // Now safe to get the value because we checked for presence boardReference.setTitle(updatedBoard.getTitle()); boardReference.setName(updatedBoard.getName()); boardReference.setContent(updatedBoard.getContent()); boardReference.setUpdated_time(LocalDateTime.now()); boardReference.setPassword(updatedBoard.getPassword()); BoardReference endUpdatedBoard = boardReferenceRepository.save(boardReference); return ResponseEntity.ok(endUpdatedBoard); } // delete board public ResponseEntity> deleteBoard( Integer no) { BoardReference boardReference = boardReferenceRepository.findById(no) .orElseThrow(() -> new ResourceNotFoundException("Not exist Board Data by no : ["+no+"]")); boardReferenceRepository.delete(boardReference); Map response = new HashMap<>(); response.put("Deleted Board Data by id : ["+no+"]", Boolean.TRUE); return ResponseEntity.ok(response); } public class ResourceNotFoundException extends RuntimeException { public ResourceNotFoundException(String message) { super(message); } } } 400 에러가 왜뜨는지 모르겠어요 질문 받으실때 참조하시면 좋을것 같아서 긴 코드라도 일단 해당되는 부분 다 가져와 봤어요 생략하시며 읽으셔도 됩니다 답변부탁드려요 (꾸벅)

kenu,전독시 · Answer

https://http.cat/400

Clickin · Answer

프론트 에러 로그가 아니라 백엔드 에러 로그를 가져오셔야하는 부분 아닌가요... 에러는 백엔드에서 나는거고 프론트는 400으로 던져준걸 표기해줄 뿐인데요

Brian.P · Answer

쭈우우욱 긁어서 이번에 생긴 ChatGPT 4o에 던저봅시다 자바 메소드 호출 시 400 에러가 발생하는 이유를 분석해 보겠습니다. 400 에러는 클라이언트 측에서 잘못된 요청을 보냈을 때 발생하는데, 주로 다음과 같은 이유로 발생할 수 있습니다.잘못된 URL 형식: 요청 URL이 잘못되었거나 경로에 오타가 있는 경우.잘못된 요청 파라미터: 필요한 파라미터가 누락되었거나 잘못된 형식으로 전달된 경우.잘못된 요청 본문: 요청 본문이 잘못되었거나 서버에서 예상하지 못한 형식으로 전달된 경우.서버 측 validation 에러: 서버에서 입력 데이터를 검증할 때 실패한 경우.코드를 보면 클라이언트와 서버 간의 데이터 전송 방식에서 문제가 발생했을 가능성이 있습니다. 몇 가지 확인해 볼 사항과 수정할 부분을 제안하겠습니다.클라이언트 코드 확인먼저 클라이언트 측 코드에서 요청을 어떻게 보내고 있는지 확인해 보겠습니다.createBoard 메소드클라이언트에서 createBoard 메소드로 데이터를 전송할 때 formData 객체를 사용하는데, 서버에서 이 객체를 제대로 처리하고 있는지 확인해야 합니다.createBoard = async (event) => { event.preventDefault(); let formData = new FormData(); formData.append('board_number', this.state.board_number); formData.append('title', this.state.title); formData.append('name', this.state.name); formData.append('content', this.state.content); formData.append('created_time', this.state.created_time); formData.append('updated_time', this.state.updated_time); formData.append('password', this.state.password); formData.append('is_attached_1', this.state.is_attached_1); formData.append('file_id_1', this.state.file_id_1); formData.append('file_path_1', this.state.file_path_1); formData.append('is_attached_2', this.state.is_attached_2); formData.append('file_id_2', this.state.file_id_2); formData.append('file_path_2', this.state.file_path_2); const files = document.querySelectorAll('input[type="file"]'); Array.from(files).forEach((file, index) => { formData.append(`files[${index}]`, file.files[0]); }); try { if (this.props.create === 'create') { await BoardReferenceService.createBoard(formData); alert('제출이 완료 되었습니다'); window.location.href = "/reference-list"; } else { await BoardReferenceService.updateBoard(this.state.board_number, formData); window.location.href = "/reference-list"; } } catch (error) { console.error("Error creating board:", error); } }서버 코드 확인 및 수정createBoard 메소드서버 측 createBoard 메소드에서 formData를 처리하는 부분을 확인합니다.@PostMapping("") public ResponseEntity createBoard(@RequestParam("formData") Map formData) { System.out.println("Received formData: " + formData); // Debugging line to see the formData content String result = "upload-form"; try { // Process formData as needed MultipartFile file = (MultipartFile) formData.get("files"); // Assuming "files" is the key for the uploaded file if (!file.isEmpty()) { String filename = file.getOriginalFilename(); System.out.println("Uploading file: " + filename); String fullPath = uploadDir + filename; file.transferTo(new File(fullPath)); } } catch (IOException e) { System.err.println("Error uploading file: " + e.getMessage()); return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error uploading file: " + e.getMessage()); } return ResponseEntity.ok(result); }여기서 formData가 Map로 받는 부분이 문제일 수 있습니다. MultipartFile과 일반 데이터 필드가 섞여 있기 때문에 이를 각각 처리해줘야 합니다. 아래와 같이 수정해 보세요.@PostMapping("") public ResponseEntity createBoard(@RequestParam Map formData, @RequestParam("files") MultipartFile[] files) { System.out.println("Received formData: " + formData); // Debugging line to see the formData content try { for (MultipartFile file : files) { if (!file.isEmpty()) { String filename = file.getOriginalFilename(); System.out.println("Uploading file: " + filename); String fullPath = uploadDir + filename; file.transferTo(new File(fullPath)); } } // Process other formData fields as needed } catch (IOException e) { System.err.println("Error uploading file: " + e.getMessage()); return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error uploading file: " + e.getMessage()); } return ResponseEntity.ok("upload-form"); }점검 사항요청 데이터 확인: 클라이언트에서 보내는 formData가 서버에서 잘 받아지고 있는지 확인하기 위해 디버깅 로그를 추가해 보세요.필드 매핑 확인: 서버 측에서 formData와 파일 데이터가 올바르게 매핑되고 처리되는지 확인하세요.파일 처리 확인: 파일이 제대로 처리되고 저장되는지 확인하세요.이와 같이 클라이언트와 서버 측의 데이터를 처리하는 방식을 재점검하고 필요한 부분을 수정해 보세요. 이를 통해 400 에러의 원인을 해결할 수 있을 것입니다. 역시 ChatGPT는 똑똑하니 끄덕이며 넘어갑니다

프론트엔드에서 자바 메소드 호출시 400 에러가 뜹니다

3개의 답변

기술 목록