从 React 前端开机自检到 API 不起作用 - 错误 400

Question

我正在尝试将数据发送到我的 Flask API 以将数据放入我的数据库，但我不断收到以下错误： 选项/createUser HTTP/1.1" 400

注册.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; 

这就是我的烧瓶 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

如果您使用的是Chrome，请尝试添加CORS扩展，并且应该在后端(如springboot@CrossOrigin(origins="http://localhost:3000")(中启用CORS

Answer 2

当您从请求中检索数据时，尝试在块中使用它。 400 错误通常表明服务器无法从 POST 请求正文中获取值。

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

Answer 3

您还可以通过在输入表单标记(如name=Email(中使用名称字段并设计如下所示的通用更改处理程序来缩短代码部分：

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

Answer 4

从错误消息error: OPTIONS /createUser HTTP/1.1" 400中，未正确处理OPTIONS请求。我想，默认情况下，Postman 不会执行OPTIONS请求，因此这种情况对您有用。此外，路由不返回任何 json，因此如果是纯文本，return res.json(); //error here失败。

我已经用普通的 Flask 方法修改了您的示例。注意：我还从 Javascript 中删除了'Access-Control-Allow-Origin':'*'请求标头。

@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

并且请不要在数据库中以明文形式保存密码：-(