POST to API из интерфейса React не работает - ошибка 400

Question

Я пытаюсь отправить данные в мой Flask API, чтобы получить данные в моей базе данных, но я получаю следующую ошибку: 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; 

Это то, что мой Flask API имеет

@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

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

Answer 1

Попробуйте добавить расширение CORS, если вы используете Chrome, и вы должны включить CORS в бэкэнде, например, springboot @CrossOrigin(origins="http://localhost:3000")

Answer 2

Вы также можете существенно сократить свою часть кода, используя поля Name в своих тегах формы ввода, например name=Email, и разработав универсальный обработчик изменений, например:

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

Answer 3

Из сообщения об ошибке error: OPTIONS /createUser HTTP/1.1" 400 запрос OPTIONS обработан неправильно. Я думаю, Почтальон по умолчанию не выполняет запрос OPTIONS, поэтому этот случай работает для вас. Кроме того, маршрут не возвращает никаких json, поэтому return res.json(); //error here завершается неудачно, если это обычный текст.

Я изменил ваш пример с помощью простых Flask методов. Примечание. Я также удалил заголовок запроса 'Access-Control-Allow-Origin':'*' из 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

И, пожалуйста, не сохраняйте пароли в виде открытого текста в вашей базе данных: -)

Answer 4

Попробуйте использовать это в блоке при получении данных из запроса. Ошибка 400 обычно является признаком того, что сервер не может получить значения из вашего тела запроса POST.

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