POST to API from React frontend is not working -- Error 400

Question

I'm trying to send data to my Flask API to get data into my database, but I keep getting the following error: OPTIONS /createUser HTTP/1.1" 400

Reg.js

import React, { Component } from 'react';  

class Reg extends Component {  

  constructor() {  
    super();  

    this.state = {  
      FirstName: '',  
      LastName: '',  
      Email: '',  
      Password: '' 
    }  

    this.Email = this.Email.bind(this);  
    this.Password = this.Password.bind(this);  
    this.FirstName = this.FirstName.bind(this);  
    this.LastName = this.LastName.bind(this);   
    this.register = this.register.bind(this);  
  }  

  Email(event) {  
    this.setState({ Email: event.target.value })  
  }   

  Password(event) {  
    this.setState({ Password: event.target.value })  
  }  
  FirstName(event) {  
    this.setState({ FirstName: event.target.value })  
  }  
  LastName(event) {  
    this.setState({ LastName: event.target.value })  
  }  

  register(event) {  

    fetch('http://localhost:5000/createUser', {  
      method: 'post',  
      headers: {  
        'Accept': 'application/json',  
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin':'*' 
      },  
      body: JSON.stringify({  
        "FirstName": this.state.FirstName,  
        "Password": this.state.Password,  
        "Email": this.state.Email,  
        "LastName": this.state.LastName 
      })  
    }).then(function(res){
      return res.json();
    }).then(function(data){
      console.log(data);
    }).catch((error) => {
      console.log(error);
    });
  }  

  render() {  

    return (  
      <div>  
        <form className="form" id="addItemForm">
            <input type="text"  onChange={this.FirstName} placeholder="Enter First Name"/>
            <input type="text"  onChange={this.LastName} placeholder="Enter Last Name"/>
            <input type="text"  onChange={this.Email} placeholder="Enter Email"/>
            <input type="password"  onChange={this.Password} placeholder="Enter Password"/>
            <button  onClick={this.register}  color="success" block>Create Account</button>
        </form>
      </div>  
    );  
  }  
}  

export default Reg;

This is what my Flask API has

@main.route('/createUser', methods=['POST', 'OPTIONS'])
def createUser():
    conn = connection()
    cur = conn.cursor()

    req = request.get_json()
    first = req.get('FirstName')
    last = req.get('LastName')
    email = req.get('Email')
    pw = req.get('Password')

    sql = "INSERT INTO User (first, last, emailAddress, password) VALUES (?, ?, ?, ?)"
    data = (first, last, email, pw)
    cur.execute(sql, data)

    conn.commit()
    cur.close()

    return 'Done', 201

I've tried changing my JSON in case it was malformed, but it didn't change anything. I also tried posting from postman and it works fine from there so I'm thinking its the javascript.

try to use Axios for Http request in react js. you can refer to this doc — coderman401
– coderman401, Commented Feb 11, 2020 at 5:31
Your states' value should not be changing on event? Can you console.log them and post a snippet in here? — Jawad ul hassan
– Jawad ul hassan, Commented Feb 11, 2020 at 5:36
I'm wondering what the return type from the flask route is - you return simply "Done", 201 - that means most likely plain text, with 201 created. In your javascript, you try to parse JSON but you are not returning json. Has your user been created? — wiesson
– wiesson, Commented Feb 11, 2020 at 6:34

atadnmz · Accepted Answer · 2020-02-11 05:47:08Z

1

Try to add CORS extension if you are using Chrome and you should enable CORS in backend like springboot @CrossOrigin(origins="http://localhost:3000")

answered Feb 11, 2020 at 5:47

atadnmz

3112 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

delishas Over a year ago

I have CORS imported for flask and added CORS extension and it didn't change anything.

snieguu · Accepted Answer · 2020-02-11 06:31:02Z

0

Try to use this in the block when you retrieve data from the request. 400 error is usually a sign of that server can't get values from your POST request body.

req = request.json
first = req['FirstName']
last = req['LastName']

edited Feb 11, 2020 at 6:31

snieguu

2,2834 gold badges23 silver badges43 bronze badges

answered Feb 11, 2020 at 5:56

Tokhtar Akhmetov

1

1 Comment

delishas Over a year ago

I got the following error: TypeError: 'NoneType' object is not subscriptable

Patrick Hener · Accepted Answer · 2020-02-11 07:10:39Z

0

You can also trastically shorten your Code Part By using Name fields in your input Form Tags like name=Email and designing an universal change handler like so:

onChange(event) {  
    this.setState({ event.target.name: event.target.value })  
  }

answered Feb 11, 2020 at 7:10

Patrick Hener

1356 silver badges16 bronze badges

Comments

wiesson · Accepted Answer · 2020-02-11 08:48:09Z

0

From your error message error: OPTIONS /createUser HTTP/1.1" 400, the OPTIONS request is not handled correctly. I guess, Postman is not doing a OPTIONS request by default, so that case works for you. In addition, the route is not returning any json, so return res.json(); //error here fails if it's plain text.

I have modified your example with plain Flask methods. Note: I have also removed the 'Access-Control-Allow-Origin':'*' request header from the Javascript.

@main.route('/createUser', methods=['POST', 'OPTIONS'])
def createUser():
    # handle option request
    if request.method == "OPTIONS":
        response = make_response()
        response.headers["Access-Control-Allow-Origin"] = "*"
        response.headers[
            "Access-Control-Allow-Headers"
        ] = "Origin, Accept, Content-Type"
        response.headers["Access-Control-Allow-Methods"] = "POST,OPTIONS"
        response.headers["Access-Control-Allow-Credentials"] = "true"
        return response

    if request.method == "POST":
        # do your SQL stuff
        conn = connection()
        cur = conn.cursor()

        req = request.get_json()
        first = req.get("FirstName")
        last = req.get("LastName")
        email = req.get("Email")
        pw = req.get("Password")

        sql = (
            "INSERT INTO User (first, last, emailAddress, password) VALUES (?, ?, ?, ?)"
        )
        data = (first, last, email, pw)
        cur.execute(sql, data)

        conn.commit()
        cur.close()

        # make response
        response = make_response("{}")  # return empty JSON response
        response.headers["Access-Control-Allow-Origin"] = "*"
        response.headers[
            "Content-Type"
        ] = "application/json"  # set response type to JSON
        return response

    return "", 405  # method not allowed

And please don't save passwords in plaintext in your database :-)

edited Feb 11, 2020 at 8:48

answered Feb 11, 2020 at 7:01

wiesson

6,8436 gold badges43 silver badges71 bronze badges

6 Comments

delishas Over a year ago

I changed it and nothing happens. Is it because my code for react is sending an OPTIONS request even though I specified it to be a POST (although I'm reading that it is because of CORS pre-flight request, which I don't entirely understand)?

wiesson Over a year ago

The browser always sends an OPTION request before the "regular" (GET, POST, PUT..) request to check if the resource is allowed. What is the error message in the browser?

delishas Over a year ago

flask outputs "[13/Feb/2020 23:39:46] "OPTIONS /createUser HTTP/1.1" 200 ", but I log the states and they come out empty and nothing gets inserted into the database

wiesson Over a year ago

The option request looks good to me - what happens inside the post method? Any logs from the browser?

wiesson Over a year ago

The post request does not hit the server? You just see the options request? What does your Postman request say?

|

Collectives™ on Stack Overflow

POST to API from React frontend is not working -- Error 400

4 Answers 4

1 Comment

1 Comment

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related