reactjs - Axios 数据在发送到 Flask POST 路由时以 ImmutableMultiDict([]) 的形式出现,但与 Postman 一起使用
问题描述
我正在使用 Flask 创建一个 POST 方法来在我的 MySQL 数据库中注册一个新用户。我尝试创建一个 Axios 方法来从我的 React JS 应用程序发送 POST 请求。我正在使用 Postman 进行测试,并使用 application/x-www-form-urlencoded 发送它。注册在 Postman 中有效,但数据以ImmutableMultiDict([])的形式出现。
烧瓶代码:
@app.route('/registerUser', methods=['POST'])
def registerUser():
data = request.form
if len(data) is 0:
return 'Request was empty!'
username = data['username']
password = data['password']
email = data['email']
user = User(username=username,
password=password,
email=email)
db.session.add(user)
db.session.commit()
return 'Registration success!'
return 'Registration failed!'
反应代码:
class Signup extends Component {
constructor(props){
super(props);
this.state = {
username: '',
password: '',
email: ''
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.clearInputs = this.clearInputs.bind(this);
}
handleChange(event){
event.preventDefault();
this.setState({[event.target.name]: event.target.value});
}
handleSubmit(event){
event.preventDefault();
const config = {
headers: { 'content-type': 'application/x-www-form-urlencoded' }
}
axios.post(`http://localhost:5000/registerUser`,
this.state, config)
.then(res => {
alert(res.data);
})
.catch((err) => {
alert(err);
});
}
render(){
return (
<div className='signup'>
<form onSubmit={this.handleSubmit}>
<label>
Username
<input type='text' name='username'
value={this.state.username}
onChange={this.handleChange}/><br/>
</label>
<label>
Password
<input type='password' name='password'
value={this.state.password}
onChange={this.handleChange}/><br/>
</label>
<label>
Email
<input type='text' name='email'
value={this.state.email}
onChange={this.handleChange}/><br/>
</label>
<input type='submit' value='Submit' /><br/>
</form>
</div>
);
}
}
export default Signup;
为什么数据不能从 Axios 正确发送?我在烧瓶中使用CORS,Postman 和 Axios 都应该发送相同的表单数据。
编辑:我将 POST 请求更改为使用 request.form 但是,Postman 工作,但 Axios 仍然没有。来自邮递员:
ImmutableMultiDict([('username', 'person'), ('password', 'Password1'), ('email', 'example@example.com')])
来自 Axios: ImmutableMultiDict([('{"username":"someone","password":"Password1","email":"email@example.com"}', '')])
Axios 是否配置错误?
解决方案
我解决了这个问题。默认情况下,Axios 以 JSON 格式发送数据。为了符合 urlencoded,您需要构建一个新的 URLSearchParams 对象来代替发送。请参阅文档
这是有效的 React 代码:
handleSubmit(event){
event.preventDefault();
const config = {
headers: { 'content-type': 'application/x-www-form-urlencoded' }
}
const getParams = (obj) => {
const params = new URLSearchParams();
const keys = Object.keys(obj);
for(let k of keys){
params.append(k, obj[k]);
}
return params;
}
axios.post(`http://localhost:5000/registerUser`,
getParams(this.state), config)
.then(res => {
alert(res.data);
this.clearInputs();
})
.catch((err) => {
alert(err);
});
}
这适用于我的 OP Flask 代码。
推荐阅读
- react-native - 反应原生动画不透明度和位置
- wordpress - 在新的 Wordpress 安装下重定向旧的子目录页面请求
- python - 如何使用 Matplotlib 或 Seaborn 根据不同组指定图例
- r - 汇总函数 dplyr 的持续错误
- powershell - Powershell Export-csv 仅导出标头
- google-analytics - 谷歌分析用户限制
- ruby-on-rails - 安装后初始化 madmin gem 时出错
- copy - 将 Dynamics CRM on Premise 复制到另一个实例
- python - 不反映评论中的当前用户
- python - 为什么我不断收到锁定文件错误安装 django 或 django 包?