400 Bad Request - $ http.post到Flask后端

Question

我正在使用angularjs使用ng-change指令和$ http.post发布到我的Flask后端，但每当我在输入中输入文本时，我都会收到400 Bad Request。

这是我的angularjs代码：

var strategyMapApp = angular.module('strategyMapApp', ['textAngular'])
.config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{[').endSymbol(']}');
});

strategyMapApp.controller('StrategyMapCtrl', function($scope, $http){
    $scope.change = function(mapping){
        $http.post('/strategymap',mapping);
    };

    $scope.textAngularOpts = {};
});

以下是我的html文件中的相关代码：

<div class="panel-body" ng-app="strategyMapApp">
   <div class="pull-right"><button></button></div>
      <table class="table">
        <thead>
        <tr>
            <th>Company Sector</th>
            <th>Company Industry</th>
            <th>Economic Cycle Position</th>
            <th>Macro Strategy</th>
            <th>Tactical Strategy</th>
            <th>Guidance</th>
        </tr>
        </thead>
        <tbody ng-controller="StrategyMapCtrl" 
             ng-init="mapping.ticker='{{ overview[0].ticker}}'">
             <tr>
                <td>{{ overview[0].company_sector }}</td>
                <td>{{ overview[0].company_industry }}</td>
                <td><input type="text" ng-model="mapping.cycle_position"
                    ng-change="change(mapping)"
                    placeholder="{{ mapping.cycle_position }}"/></td>
                 <td><input type="text" ng-model="mapping.macro_strategy"
                     ng-change="change(mapping)"/></td>
                 <td><input type="text" ng-model="mapping.tactical_strategy"
                     ng-change="change(mapping)"/></td>
                 <td><input type="text" ng-model="mapping.guidance"
                     ng-change="change(mapping)"/></td>
             </tr>
        </tbody>
      </table>

最后，我的Flask函数用于处理POST请求：

@app.route('/strategymap', methods=['GET','POST'])
def strategymap():
    #form = TickerForm(request.form)
    #ticker = Ticker()
    if request.method == 'POST':
        data = request.get_json(force=True)
        print data
        ticker = data['ticker']
        mapping = Ticker.objects.get(ticker=ticker)
        print mapping
        if mapping:
            mapping.cycle_position = data['cycle_position'] if 
               'cycle_position' in data.keys() 
               else mapping.cycle_position
            mapping.macro_strategy = data['macro_strategy'] if 
               'macro_strategy' in data.keys() 
               else mapping.macro_strategy
            mapping.tactical_strategy = data['tactical_strategy'] if
               'tactical_strategy' in data.keys() 
               else mapping.tactical_strategy
            mapping.save()
        else:
            mapping = Ticker(ticker=data['ticker'],
                      cycle_position=data['cycle_position'],
                      macro_strategy=data['macro_strategy'],
                      tactical_strategy=data['tactical_strategy'])
                      .save()

因此，每当我在文本输入中键入一个值时，angular应该将更新的模型发布到Flask，但我收到400 Bad Request。我试过data = request.json＆amp; data = request.data也无济于事。

此外，如果有任何混淆，花括号来自Jinja2模板，'{['和'}]'是angularjs的符号。

感谢任何帮助！

编辑 - 从Flask / Jinja2添加csrf_token修复了问题，更新了下面的html / angular代码：

<tbody  ng-controller="StrategyMapCtrl" ng-init="mapping.ticker='{{ overview[0].ticker}}'">
    <tr>
        <td><input type="hidden" value="{{ nonwtf_csrf_token() }}" id="csrftoken"/></td>
        <td>{{ overview[0].company_sector }}</td>
        <td>{{ overview[0].company_industry }}</td>
        <td><input type="text" ng-model="mapping.cycle_position"/></td>
        <td><input type="text" ng-model="mapping.macro_strategy"/></td>
        <td><input type="text" ng-model="mapping.tactical_strategy"/></td>
        <td><input type="text" ng-model="mapping.guidance"/></td>
        <td><button class="btn-primary" ng-click="change(mapping)">Save Mapping</button></td>
    </tr>
</tbody>

strategyMapApp.controller('StrategyMapCtrl', function($scope, $http){
    var csrftoken = document.getElementById('csrftoken').value;
    $scope.change = function(mapping){
        alert(csrftoken);
        mapping.nonwtf_csrf_token = csrftoken;
        alert(JSON.stringify(mapping));
        $http.post('/strategymap',mapping);
    };

    $scope.textAngularOpts = {};
});