Running logout with react and spring boot does not work well

Question

if I Press the logout button on the React to execute the handleLogout function below

const handleLogout = async () => {
    try {
      const response = await axios.post('http://localhost:8080/logout', {}, {
        withCredentials: true
      });
      console.log(response.data);
      window.location.href = "http://localhost:3000/login";
    } catch (error) {
      console.error('Fail to Logout', error);
    }
  };

These requests are executed on the controller implemented in springboot below

@PostMapping("/logout")
public ResponseEntity<String> logout(HttpSession session) {
    session.invalidate();
    return ResponseEntity.ok("Logout successful");
}

But when I click the logout button

HeaderEdit.js:68

   GET http://localhost:8080/login?logout 405 (Method Not Allowed)

I'm getting the error, and I'm seeing session values disappearing when I refresh. What's the problem?

I tried with axios.post and @PostMapping but it didn't work out.

Answer 1

Your axios request has POST method while in spring boot has GET request. Change it POST.