인프런 커뮤니티 질문&답변

=========중용한 부분이 오타가 있어서 수정합니다================

안녕하세요. 완강을 한후에 제가 프론트엔드와 백엔드간 통신을 확인하려합니다.

그런데 예상과 다르네요...

일단 프론트 엔드 (react을 먼저 보여드릴께요)

const handleSubmit = (event) => {

fetch('http://localhost:8080/api/posttest', {
        method: 'POST', // *GET, POST, PUT, DELETE 등
        body: JSON.stringify({
          name: 'foo',
          email: 'kjy@gmail.com',
          message: '1',
        }),
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      })
      .then((response) => response.json())
      .then((json) => alert(json));
      alert("test")
  };

이렇게 작성하고 ...

백엔드( spring boot)는

@RestController
@RequestMapping("/api")
class _____ApiController{

    @PostMapping(path=["/posttest"])
    fun postTest(
        @RequestBody body: BodyClass
    ): ResponseEntity<String> {
        println(body)
        return ResponseEntity.ok().body("test")
    }
}

data class BodyClass(
    var name: String = "",
    var email: String = "",
    var message: String = ""
)

이렇게 코딩 했는데 ..

분명

해서 테스트 해서 정상 확인했는데 ...

react에서 전송하면 postTest 함수를 진입하지 않습니다. ...

백엔드쪽에 코드를 좀 바꿔서 Requestbody에서 json 파일 그대로 받자는 식으로 아래처럼 바꿨어요

fun postTest(
    @RequestBody json: String
): ResponseEntity<String> {
    println(body)
    return ResponseEntity.ok().body("test")
}

react는 json 형식인지 표시하는걸 지웠는데

fetch('http://localhost:8080/api/posttest', {
        method: 'POST', // *GET, POST, PUT, DELETE 등
        body: JSON.stringify({
          name: 'foo',
          email: 'kjy@gmail.com',
          message: '1',
        }),
        headers: {
          // 삭제 
        },
      })
      .then((response) => response.json())
      .then((json) => alert(json));
      alert("test"

백엔드의 postTest함수에 진입 합니다.

프론트 엔드에서 전송한 json 내네요용이 전송됩니다.

이게 ... 새롭게 프로젝트를 만들어도 똑같고 프론트 엔드 백엔드 모두 새롭게 프로젝트를 만들어서 테스트 해도 똑같아요...

스프링 부트에서 잘못된건지... react에서 잘못된건지 잘 모르겠네요...

아마도 스프링 부트에서 뭔가 잘못된거 같은게 api 서버가 있어서 그걸로 접속하니깐 되긴 하네요...

그렇다면 스프링 부트에서 잘못한건지..

분명 스프링 부트에도 문제가 없어 보이는데

힘드네요 ... ㅠ.ㅠ 살려주세요 ㅠ.ㅠ 몇일째 못풀고 있어요...