отправка данных от реакции на экспресс, но требование, тело пусто без данных - PullRequest
Новая
       11

отправка данных от реакции на экспресс, но требование, тело пусто без данных

0 голосов
/ 02 июля 2019

Я делаю вход в систему и регистрацию, у меня было так много проблем с входом в систему, потому что я не знаю, как отправить данные или токен, я буду спрашивать позже anw.все в регистрации работало нормально, пока я не реализовал реакцию, не реагируя на регистрацию и вход в систему, где просто отлично, но сейчас не все в порядке

Я попробовал все, я получаю ответ из формы, но не получаю данные из него, ответ в порядке, но req.body пуст и не дает мне bck объект json, который я должен добавить в db

Вот мой основной 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})
    }
  })

это моя функция регистрации, я вызвал ее маршрут в файле app.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));
   });
    }
}

server.js, который содержит мой db 

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

мой интерфейс реакции для регистрацииФорма, здесь, где я должен поместить код в componentDidMount о при отправке?я действительно сбит с толку, но таким образом, как он есть, я вижу ответ, который просто отлично, но когда я помещаю метод: «POST», он начинает давать мне ожидающий и занимает много времени до конца 

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;

с постом: 

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

без метода: POST 

Request URL: http://localhost:3001/api/signup
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:3001
Referrer Policy: no-referrer-when-downgrade
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
access-control-allow-origin: *
connection: close
content-length: 3
date: Tue, 02 Jul 2019 06:09:33 GMT
etag: W/"3-KeLc+7FvY7sCVN91haFbtvtekn0"
strict-transport-security: max-age=15552000; includeSubDomains
x-content-type-options: nosniff
x-dns-prefetch-control: off
x-download-options: noopen
x-frame-options: SAMEORIGIN
X-Powered-By: Express
x-xss-protection: 1; mode=block
Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,en-US;q=0.8,ar;q=0.7,pt;q=0.6
Connection: keep-alive
Content-Type: application/json
Host: localhost:3001
If-None-Match: W/"6cc-EO/gZy2MYsHV5DfI5V4hi7mrhuE"
Referer: http://localhost:3001/api/signup
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Mobile Safari/537.36

Я хочу знать, каким должно быть решение, каковы конечные точки и любые исправления, пожалуйста, помогите

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...