Angularjs + Flask-wtf：错误请求 400答案

【问题标题】：Angularjs + Flask-wtf: Bad request 400Angularjs + Flask-wtf：错误请求 400
【发布时间】：2015-06-15 17:57:46
【问题描述】：

我遇到了一个非常奇怪的 wtf-forms 问题，我使用 angularjs $http-module 发送请求。初始化 WTForm 后，我收到 Bad request: 400 错误。出于测试目的，我禁用了 csrf 保护。我真的不知道在哪里寻找问题。以下是最小的失败：

Angularjs 服务发送请求：

var data = new FormData();
data.append('surname', _gifter.surname);
data.append('lastname', _gifter.lastname);
data.append('email', _gifter.email);
data.append('email_confirm', _gifter.email_confirm);
data.append('prize', gift.prize);

$http.post('ajax/claim/' + DataProvider.gift.id + '/', data)

烧瓶路线：

@app.route('/ajax/claim/<int:gift_id>/', methods = ['POST'])
def claim_gift(gift_id):
    print("request:" + request.data)
    claim_form = ClaimGiftForm(csrf_enabled=False)
    return 'success'

WTForm：

class ClaimGiftForm(Form):
    surname = TextField(
        validators=[validators.Required()])
    lastname = TextField(
        validators=[validators.Required()])
    email = EmailField(
        validators = [
            validators.email(),
            validators.Required()])
    email_confirm = EmailField(
        validators = [
            validators.Required(),
            validators.EqualTo()])
    prize = IntegerField()

当我打印请求时（参见“Flask route”），数据似乎没问题 - 一切都正确传输。但是在初始化表单时，我得到了上述错误。

Edit1：我刚刚发现，由于某种原因，request.form MultiDict 是空的，尽管 request.data 包含预期的数据。但是我不知道为什么会这样。

编辑2： pprint(request.data) 给：

-----------------------------109386632915471364402090498247\r\nContent-Disposition: form-data; name="surname"\r\n\r\ntheName\r\n
-----------------------------109386632915471364402090498247\r\nContent-Disposition: form-data; name="lastname"\r\n\r\ntheLastname\r\n
-----------------------------109386632915471364402090498247\r\nContent-Disposition: form-data; name="email"\r\n\r\nsomeone@somewhere.net\r\n
-----------------------------109386632915471364402090498247\r\nContent-Disposition: form-data; name="email_confirm"\r\n\r\nsomeone@somewhere.net\r\n
-----------------------------109386632915471364402090498247\r\nContent-Disposition: form-data; name="prize"\r\n\r\n12\r\n
-----------------------------109386632915471364402090498247--\r\n'

【问题讨论】：

标签： ajax angularjs flask flask-wtforms bad-request

【解决方案1】：

您的 JavaScript 有 email_confirmed，但表单的字段是 email_confirm。

【讨论】：

我只是用力捂脸。明天看看能不能解决。
好吧，不幸的是，这只是问题中的一个错字。我相应地对其进行了编辑

【解决方案2】：

它是 ajax 请求的标头。我需要添加一个 header-config 对象：

{
    withCredentials: true,
    headers: {'Content-Type': undefined},
    transformRequest: angular.identity
}

整个请求现在看起来像这样：

$http.post('ajax/claim/' + DataProvider.gifts[index].id + '/', data, {
    withCredentials: true,
    headers: {'Content-Type': undefined},
    transformRequest: angular.identity
).success(...);

我认为这个问题已经结束。

【讨论】：