Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Erro "Cannot POST /" ao tentar cadastrar

Após preencher os dados no formulário e clicar em "Gravar" o navegador retorna o erro "Cannot POST /". No console aparece "The development server has disconnected. Refresh the page if necessary." e "Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico (“default-src”).".

Não sei se isso tem a ver, mas o array do servidor local (http://localhost:8080/api/autores/) retorna vazio: "[]".

Arquivo "App.js":

import React, { Component } from 'react';

import './css/side-menu.css';
import './css/pure-min.css';
import $ from 'jquery';

class App extends Component {

    constructor(){
        super();
        this.state = {lista : [],nome:'',email:'',senha:''};
        this.enviaForm = this.enviaForm.bind(this);
        this.setNome = this.setNome.bind(this);
        this.setEmail = this.setEmail.bind(this);
        this.setSenha = this.setSenha.bind(this);
    }

    componentDidMount(){
        $.ajax({
            url:"http://localhost:8080/api/autores",
            dataType: 'json',
            success:function(resposta){
                this.setState({lista:resposta});
                }.bind(this)
            }
        );
    }

    enviaForm(evento){
        evento.preventDefault();

        $.ajax({
            url:"http://localhost:8080/api/autores",
            contentType: 'application/json',
            dataType: 'json',
            type: 'post',
            data: JSON.stringify({nome:'',email:'',senha:''}),
            success: function(resposta){                
                this.setState({lista:resposta});
            }.bind(this),
            erro: function(resposta){
                console.log("erro");
            }
        });
    }

    setNome(evento){
        this.setState({nome:evento.target.value});
    }

    setEmail(evento){
        this.setState({email:evento.target.value});
    }

    setSenha(evento){
        this.setState({senha:evento.target.value});
    }

  render() {
    return (

<div id="layout">

    <a href="#menu" id="menuLink" className="menu-link">

        <span></span>
    </a>

    <div id="menu">
        <div className="pure-menu">
            <a className="pure-menu-heading" href="#">Company</a>

            <ul className="pure-menu-list">
                <li className="pure-menu-item"><a href="#" className="pure-menu-link">Home</a></li>
                <li className="pure-menu-item"><a href="#" className="pure-menu-link">Autor</a></li>
                <li className="pure-menu-item"><a href="#" className="pure-menu-link">Livro</a></li>     
            </ul>
        </div>
    </div>

    <div id="main">
            <div className="header">
              <h1>Cadastro de Autores</h1>
            </div>
            <div className="content" id="content">
              <div className="pure-form pure-form-aligned">
                <form className="pure-form pure-form-aligned" onsubmit={this.enviaForm.bind(this)} method="post">
                  <div className="pure-control-group">
                    <label htmlFor="nome">Nome</label> 
                    <input id="nome" type="text" name="nome" value={this.state.name} onChange={this.setNome} />                  
                  </div>
                  <div className="pure-control-group">
                    <label htmlFor="email">Email</label> 
                    <input id="email" type="email" name="email" value={this.state.email} onChange={this.setEmail} />                  
                  </div>
                  <div className="pure-control-group">
                    <label htmlFor="senha">Senha</label> 
                    <input id="senha" type="password" name="senha" value={this.state.senha} onChange={this.setSenha} />                                      
                  </div>
                  <div className="pure-control-group">                                  
                    <label></label> 
                    <button type="submit" className="pure-button pure-button-primary">Gravar</button>                                    
                  </div>
                </form>             

              </div>  
              <div>            
                <table className="pure-table">
                  <thead>
                    <tr>
                      <th>Nome</th>
                      <th>email</th>
                    </tr>
                  </thead>
                  <tbody>
                      {
                          this.state.lista.map(function(autor){
                              return(
                                  <tr key={autor.id}>
                                      <td>{autor.nome}</td>
                                      <td>{autor.email}</td>
                                  </tr>
                              );
                          })
                      }
                  </tbody>
                </table> 
              </div>             
            </div>
          </div>


</div>
    );
  }
}

export default App;
4 respostas

Fala ai Anderson, tudo bem? Você está rodando a API localmente, certifique-se que a API está em pé no momento do POST.

Garanta também que existe uma rota mapeada para o verbo POST.

Espero ter ajudado.

Sim, estou rodando a API localmente. Com relação à "rota mapeada para o verbo POST", não entendi.

solução

Não tenho certeza sobre o que causava o erro, mas creio que era por causa das aspas duplas na url. Depois que baixei um dos códigos prontos no final da aula em questão, reparei que é usado apóstrofe na url do Ajax.

Boa Anderson, não tive tempo de responder antes, esta bem corrido por aqui.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.