Problema ao likear a foto | React parte 2: Container components e o ciclo de vida do react

Opa pessoal, tudo bem?

Então estou com um problema ao likear a foto, está me retornando isso


Função do like:

like(e) {
    e.preventDefault()

    fetch(`http://localhost:8080/api/fotos/${this.props.foto.id}/like?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`)
        .then(res => {
            if(res.ok) {
                return res.json()
            } else {
                throw new Error("não foi possível realizar o like da foto")
            }
        }).then(liker => {
            this.setState({likeada: !this.state.likeada})
        }).catch(err => {
            console.log(err);
        })

}

Retorno da Promise:

Failed to load resource: the server responded with a status of 405 ()
Foto.js:87 Error: não foi possível realizar o like da foto
    at Foto.js:82
    at <anonymous>


Retorno do Servidor:

2018-01-24 16:34:56.152  INFO 24240 --- [           main] br.com.alura.instalura.Boot              : Started Boot in 12.629 seconds (JVM running for 13.394)
2018-01-24 16:36:17.989  INFO 24240 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring FrameworkServlet 'dispatcherServlet'
2018-01-24 16:36:17.990  INFO 24240 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : FrameworkServlet 'dispatcherServlet': initialization started
2018-01-24 16:36:18.016  INFO 24240 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : FrameworkServlet 'dispatcherServlet': initialization completed in 26 ms
2018-01-24 16:36:28.245  WARN 24240 --- [nio-8080-exec-7] o.s.web.servlet.PageNotFound             : Request method 'GET' not supported
2018-01-24 16:36:28.246  WARN 24240 --- [nio-8080-exec-7] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved exception caused by Handler execution: org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'GET' not supported
2018-01-24 16:36:39.672  WARN 24240 --- [nio-8080-exec-1] o.s.web.servlet.PageNotFound             : Request method 'GET' not supported
2018-01-24 16:36:39.673  WARN 24240 --- [nio-8080-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved exception caused by Handler execution: org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'GET' not supported
2018-01-24 16:36:43.610  WARN 24240 --- [nio-8080-exec-4] o.s.web.servlet.PageNotFound             : Request method 'GET' not supported
2018-01-24 16:36:43.611  WARN 24240 --- [nio-8080-exec-4] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved exception caused by Handler execution: org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'GET' not supported

Fala Orange Five, tudo bem com vocês ?

Então, o server está respondendo um 405 informando que essa operação não é suportada pelo método GET, que é padrão quando fazemos um fetch sem nenhuma especificação adicional sobre a requisição.

A API espera receber um requisição http tipo POST para efetuar a curtida. Sendo assim é possível fazer o seguinte ajuste:

like(event) {
  event.preventDefault();

  const requestDetails = {
    method: 'POST'
  };

  fetch(`http://localhost:8080/api/fotos/${this.props.foto.id}/like?X-AUTH-TOKEN=${localStorage.getItem('auth-token')}`, requestDetails)
    .then(response => {
      if(response.ok) {
          return response.json();
      } else {
          throw new Error("Não foi possível realizar o like da foto");
      }
    }).then(liker => {
      this.setState({likeada: !this.state.likeada});
    }).catch(err => {
      console.log(err);
    });
}

Isso já deve resolver. Podemos passar um segundo argumento para fetch com informações adicionais sobre a requisição.

Espero ter ajudado. Abraco!