从react发送数据以表达,但req,body为空,无数据

时间:2019-07-02 06:10:32

标签: mysql node.js reactjs api express

我正在登录和注册,由于不知道如何发送数据或令牌,我在登录时遇到了很多问题,我稍后会询问。 直到我实施了react之前,注册中的所有内容都运行良好,而在没有问题的情况下没有进行注册和登录,则反应不佳

我尝试了一切,我从表单中获取响应,但没有从表单中获取数据,响应还可以,但是req.body为空,没有给我bck应该添加到db的json对象

这是我的主要app.js文件,用于放置模型和路线

] add Showoff#master

这是我的注册函数,我在app.js中调用了它的路由

const app = express()
app.use(cors())



//headers
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization"
  );
  if (req.method === "OPTIONS") {
    res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
    return res.status(200).json({});
  }
  next();
});

//body parser for form data
app.use(bodyParser.json())
app.use(bodyParser.json({ type: 'application/*+json' }))
app.use(bodyParser.urlencoded({ extended: true }))
app.use(cookieParser())

// secure apps by setting various HTTP headers
app.use(helmet())
// enable CORS - Cross Origin Resource Sharing

app.options('*', cors()); 


//fetching index from react
app.use(express.static(path.join(__dirname, '../client/build')));
app.get('*', (req, res) => {
  res.send(express.static(path.join(__dirname, '../client/build/index.html')))  ;
});

app.use('/api/signup', userRoute.signup )



app.listen(CONFIG.port, (err) => {
    if (err) {
      console.log(err)
    }
    console.info('Server started on port %s.', CONFIG.port)
  })

  module.exports = app

 app.use((err, req, res, next) => {
    if (err.name === 'UnauthorizedError') {
      res.status(401).json({"error" : err.name + ": " + err.message})
    }
  })

包含我的数据库的server.js文件

exports.signup=function(req , res){
    if(req.method == "POST"){
    var fname  = req.body.first_name;
    var lname= req.body.last_name;
    var username = req.body.username;
    var pass= req.body.password;
    var email=req.body.email;
    var dec_pass =atob(toString(pass));
    var encrypted_pass = cryptr.encrypt(dec_pass);

    var sql = "INSERT INTO `user`(`user_id`,`first_name`,`last_name`,`user_name` , `email`,`password`) VALUES ('','" + fname + "','" + lname + "','" + username + "','" +email+ "','" +encrypted_pass+ "')";
         var query = db.query(sql, function(err, result){
            message = "Succesfully! Your account has been created.";
           console.log(req)
            res.render('/Login');

            res.end(JSON.stringify(result));
   });
    }
}

我对注册表单的前端做出反应,在这里应将代码放在componentDidMount o上的提交位置?我真的很困惑,但是就这样,我看到的响应很好,但是当我放置方法:“ POST”时,它开始使我处于待处理状态,并且花了很多时间才能结束

const sequelize = new Sequelize ("users" , "root" , "" ,{

        host:'localhost',
        dialect:'mysql',
        operatorAliases:false,

        pool:{
            max:5,
            min:0,
            acquire:30000,
            idle:10000
        }

})

console.log('alright')
console.log(CONFIG)
console.log(login)
db.sequelize=sequelize
db.Sequelize=Sequelize
export default db

带帖子:

import React, { Component } from "react";
import { request } from "https";

class Signup extends Component {
  constructor(props) {
    super(props);
    this.state = { 
        first_name:'',
        last_name:'',
        username:'',
        email:'',
        password :''
      }
    }

  componentDidMount(){

    }


  handleChange = e => {
    if (e.target.name === "first_name") {
      this.setState({ first_name: e.target.value });
    }
    if (e.target.name === "last_name") {
      this.setState({ last_name: e.target.value });
    }
    if (e.target.name === "username") {
      this.setState({ username: e.target.value });
    }

    if (e.target.name === "email") {
      this.setState({ email: e.target.value });

    } if (e.target.name === "password") {
      this.setState({ password: e.target.value });
    }
  };


  handleSubmit = e => {
    e.preventDefault();
    fetch('/api/signup', {

        headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       },
       data:  JSON.stringify({
            fname :this.state.first_name,
            lname:this.state.last_name,
           username:this.state.username,
            email:this.state.email,
           pass:this.state.password 
       })   
      }).then(response => {
        console.log(response , request.body);
        return JSON.stringify(response)

      })

} 




  render() {
    return (
      <div style={{ backgroundColor: "#0f7986" }}>
        <div>
          <div className="container">
            <div className="text-white  align-items-center text-center justify-content-center">
              <div>
                {" "}
                {/* <img src={logo} width="13%" /> */}
              </div>

              <h4 style={{ marginTop: "1%" }}>Bellevue Medical Center</h4>
            </div>
          </div>
          <div
            className="card"
            style={{
              borderWidth: "10px",
              borderColor: "#0f7986",
              borderStyle: "outset",
              width: "50%",
              margin: "0% 25%",
              borderRadius: "15px"
            }}
          >
            <div className="card-body">
              <h5
                className="card-title text-center"
                style={{ color: "#0f7986" }}
              >
                Registration
              </h5>
              <form method = "POST" action = "http://localhost/api/signup"
                 style={{
                  marginLeft: "15px",
                  marginRight: "15px",
                  marginTop: "10px"
                }}
              >
                <div className="form-group input-group">
                  <div className="input-group-prepend">
                    <span className="input-group-text">
                      {" "}
                      <i className="fa fa-user" />{" "}
                    </span>
                  </div>
                  <input
                    name="first_name"
                    className="form-control"
                    value={this.state.first_name}
                    placeholder=" FirstName"
                    type="text"
                    onChange={this.handleChange}
                  />
                </div>
                <div className="form-group input-group">
                  <div className="input-group-prepend">
                    <span className="input-group-text">
                      {" "}
                      <i className="fa fa-user-edit" />{" "}
                    </span>
                  </div>
                  <input
                    name="last_name"
                    className="form-control"
                    value={this.state.last_name}
                    placeholder=" LastName"
                    type="text"
                    onChange={this.handleChange}
                  />
                </div>
                <div className="form-group input-group">
                  <div className="input-group-prepend">
                    <span className="input-group-text">
                      {" "}
                      <i className="fa fa-envelope" />{" "}
                    </span>
                  </div>
                  <input  name="username"
                    className="form-control"
                    value={this.state.username}
                    placeholder="UserName"
                    type="text"
                    onChange={this.handleChange}

                  />
                </div>
                <div className="form-group input-group">
                  <div className="input-group-prepend">
                    <span className="input-group-text">
                      {" "}
                      <i className="fa fa-user" />{" "}
                    </span>
                  </div>
                  <input
                   name="email"
                   className="form-control"
                   value={this.state.email}
                   placeholder="Email address"
                   type="email"
                   onChange={this.handleChange}

                  />
                </div>
                <div className="form-group input-group">
                  <div className="input-group-prepend">
                    <span className="input-group-text">
                      {" "}
                      <i className="fa fa-lock" />{" "}
                    </span>
                  </div>

                  <input
                    name="password"
                    className="form-control"
                    value={this.state.password}
                    placeholder="Password"
                    type="text"
                    onChange={this.handleChange}
                  />
                </div>
                <button
                  type="submit"
                  className="btn "
                  style={{
                    backgroundColor: "#0f7986",
                    color: "white",
                    float: "right"
                  }}
                //   disabled={!(this.state.first_name && this.state.email && this.state.password)}
                  onClick={this.handleSubmit}
                >
                  Submit
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Signup;

没有方法:POST

Referrer Policy: no-referrer-when-downgrade
Provisional headers are shown
Accept: application/json
Content-Type: application/json
Origin: http://localhost:3001
Referer: http://localhost:3001/api/signup

我想知道解决方案是什么,终点是什么,请进行任何更正

0 个答案:

没有答案