@PostMapping("/add")
public String add(@RequestParam("image") MultipartFile image, @RequestParam("name") String name) {
System.out.println(image);
 System.out.println(name);

 return "add-page";
}

이게 제 컨트롤러 코드고 requestMapping 같은거 설정 안해둬서 /add 경로가 맞긴 하거든요


function submitAuthor() {
const name = document.querySelector('input[name="name"]').value;
 const image = document.querySelector('input[type="file"]').files[0];

 const formData = new FormData();

 formData.append('name', name);
 formData.append('image', image);

 fetch('/add', {
method: 'POST',
 body: formData
})
.then(response => {
console.log(response)
})
.catch(error => {
console.error('Error', error);
 });
}

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <title>Document</title>
 <script type="text/javascript" th:inline="javascript">
 function submit() {
const name = document.querySelector('input[name="name"]').value;
 const image = document.querySelector('input[type="file"]').files[0];

 const formData = new FormData();

 formData.append('name', name);
 formData.append('image', image);

 fetch('/add', {
method: 'POST',
 body: formData
})
.then(response => {
console.log(response)
})
.catch(error => {
console.error('Error adding a:', error);
 });
 }
</script>
</head>
<body>
<div class="container">
 <h1>추가하기</h1>
 <div th:class="mt-5">
 <input type="file" name="image" accept="image/png, image/jpeg" class="form-control mt-2">
 <input name="name" class="form-control me-2" type="search" placeholder="입력" aria-label="Search">
 <button class="btn btn-outline-success" type="submit" onclick="submit()">
 추가하기
 </button>
 </div>
</div>
</body>

</html>

이게 자바스크립트 코드고 여기서 formData로 데이터 전송하는데


PostMan 으로 formData를 같은 경로로 보내면 문제 없이 컨트롤러에 도착하는데


자바스크립트 fetch를 사용하면 자꾸 404 not found 에러가 떠요


왜 이런걸까요 ㅠㅠ

cors나 csrf 설정은 문제 없습니다 ㅠㅠ