Данные Axios отображаются как ImmutableMultiDict ([]) при отправке по маршруту POST Flask, но работают с почтальоном - PullRequest
Новая
       29

Данные Axios отображаются как ImmutableMultiDict ([]) при отправке по маршруту POST Flask, но работают с почтальоном

0 голосов
/ 26 февраля 2019

Я использую Flask для создания метода POST для регистрации нового пользователя в моей базе данных MySQL.Я попытался создать метод Axios для отправки запроса POST из моего приложения React JS.Я тестировал с Почтальоном, и я отправляю его, используя application / x-www-form-urlencoded.Регистрация работает в Почтальоне, но данные отображаются как 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 во фляге, и Почтальон и Аксиос должны отправлять одни и те же данные формы.

РЕДАКТИРОВАТЬ: я изменил запрос POST для использования request.form Тем не менее, Почтальон работает, ноАксиос до сих пор нет.От Почтальона: 

ImmutableMultiDict([('username', 'person'), ('password', 'Password1'), ('email', 'example@example.com')])

От Аксиоса: ImmutableMultiDict([('{"username":"someone","password":"Password1","email":"email@example.com"}', '')])

Неправильно ли сконфигурирован Аксиос?

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Я разобрался в проблеме.По умолчанию 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.

0 голосов
/ 26 февраля 2019

Я думаю, вам придется привести данные запроса к типу JSON в пределах вашего registerUser маршрута, так как вы пытаетесь получить доступ к ответу JSON, но отправили запрос в application/x-www-form-urlencodedформат.application/x-www-form-urlencoded - это спецификация типа контента формы default, созданная W3C и обычно используемая для отправки текстовых / 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 соответствует ожидаемому, то вы можете просто вынуть необходимые поля и сохранить нового пользователя вваша база данных.Если нет, распечатайте получаемый запрос и посмотрите, как его можно правильно проанализировать.

Надеюсь, это поможет!

...