Axios数据作为Immutablemultict([])出现时，将其发送到Flask Post路线，但与Postman

Question

我正在使用烧瓶来创建邮政方法，以在我的mySQL数据库中注册新用户。我尝试创建了一个AXIOS方法来发送我的React JS应用程序的发布请求。我正在与Postman进行测试，并且正在使用应用程序/X-WWW-Form-urlenCoded发送它。注册在Postman中起作用，但数据以 ImmutableBultIdict（[]）。

烧瓶代码：

@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!'

React代码：

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 ，邮递员和Axios都应发送相同的表单数据。

编辑：我更改了POST请求以使用请求。但是，Postman起作用，但Axios仍然没有。来自Postman：

ImmutableMultiDict([('username', 'person'), ('password', 'Password1'), ('email', '[e-mail]')])

来自Axios：ImmutableMultiDict([('{"username":"someone","password":"Password1","email":"[e-mail]"}', '')])

Axios是否配置错误？

Answer 1

我发现了问题。默认情况下，Axios通过JSON格式发送数据。为了遵守UrlenCoded，您需要构建一个新的UrlsearchParams对象来发送。请参阅文档

这是工作反应代码：

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烧瓶代码一起使用。

Answer 2

我认为您将不得不在registerUser路由内将请求数据限制为类型JSON ，因为您正在尝试访问JSON响应，但您发送了请求以application/x-www-form-urlencoded格式进行。application/x-www-form-urlencoded是由W3C创建的default形式的内容类型规范，通常用于发送文本/ASCII数据。也许您可以尝试以下操作，看看是否获得了预期的JSON响应：

app.route('/registerUser', methods=['POST'])
def registerUser():
    requestJson = request.get_json(force=True)
    # check that requestJson is correct if so
    # create and save your new user to your db
    return 'Registration failed!'

如果您的requestJson是预期的，那么您只需撤出所需的字段并将新用户保存到数据库中即可。如果没有，请打印出您收到的请求，以查看如何适当解析。

希望这会有所帮助！