无法使用 Axios 以 React 形式将数据发布到 NodeJS

Question

I want to get the ticket value from react form to nodeJS and then based on the ticket received, I have to perform some task and fetch the results back onto the front end. My code seems to be fine, but it isn't running in the environment.

form.js

import React, { Component } from 'react'
import axios from 'axios'
class Formdata extends Component{
    constructor() {
        super();
        this.state = {
          ticket:""
        };
      }
    onChanges(val){
        console.log(val);
        this.setState({
            ticket:val
        })
        console.log(this.state.ticket)
    }
    handleSubmit() {

        console.log(this.state.ticket)
        const var2= {
            tic:this.state.ticket
        };
        axios.post("/user",{
            var1: var2
        })
        .then((response)=> {
            console.log("Data submitted successfully");
         }).catch((error)=> {
            console.log("got errr while posting data", error);
         });
    }

    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit} method="POST">
                    <br/>
                    <input type="text" id="ticket" name="ticket" onChange={e=>this.onChanges(e.target.value)} placeholder="Ticket Number"/>
                    <button type="submit">SUBMIT</button>
                </form>
            </div>
        )
    }
}

export default Formdata;

server.js

const express = require('express');

const app = express();

app.post('/user',function(request,response){
  const query1=request.body.var1;
  console.log(query1)
  response.query1;
  });


const port = 5000;

app.listen(port, () => `Server running on port ${port}`);

Answer 1

    axios.post("http://localhost:5000/user",{
        var1: var2
    })



const express = require('express');

const app = express();
app.use(express.json());
const bodyParser  = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));

app.post('/user',function(request,response){
  const query1=request.body.var1;
  console.log(query1)
  response.query1;
  });


const port = 5000;

app.listen(port, () => `Server running on port ${port}`);

Answer 2

You try code below:

const express = require('express');

const app = express();

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.post('/user',function(request,response){
  const body =request.body;
  console.log(body);
  res.send(body);
  });

app.listen(5000, () => `Server running on port 5000`);

You can copy the code to your code and call api from your postman:

1. API URL: localhost:5000/users
2. Change method to: POST method
3. Don't forget to add json object to body
4. Send request to backend

I hope it's work.

Answer 3

Please use and check in the file:

var bodyParser = require('body-parser');
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({
   extended: false
}));
app.use(bodyParser.json());