私はSymfony 3.2で作業していますが、一部のページでAngularJSでAJAXリクエストを使用しようとしています。AngularJS Http GETがCSRFトークンを無効にしました
私は、次のHTMLコードを持っている:JavaScriptを使用して
<div ng-app="timelineApp" ng-controller="timelineCtrl">
<div id="timeline-container">
<div ng-repeat="p in posts" class="w3-container w3-card-2 w3-white w3-round w3-margin"><br>
// ...
</div>
<div class="w3-card-2 w3-margin">
<button ng-click="fetch()" id="fetch-button" class="w3-btn-block w3-btn w3-theme-d1 w3-round" type="button">Load 10 more posts.</button>
</div>
</div>
</div>
を:
var app = angular.module('timelineApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
app.controller('timelineCtrl', function($scope, $http) {
$scope.offset = 0;
$scope.posts = [];
$scope.fetch = function() {
var uri = "/api/timeline/{{ app.user.id }}/" + $scope.offset;
$http
.get(uri)
.then(
function(response) {
$scope.posts = $scope.posts.concat(response.data.posts);
$scope.offset += 1;
if(response.data.posts.length < 10) {
$('button#fetch-button').css('display', 'none');
}
},
function(response) {
console.log(response.status)
}
)
;
}
$scope.fetch();
});
そして、ページ内のいくつかの点で、私はまた、単に{{ form(form_name) }}
とそこに置かれsymfonyのフォームを持っています。
AJAXリクエストが発生しないようにした場合(すなわち、$scope.fetch();
を削除し、要求をトリガーするボタンをクリックしない場合)、フォームはうまく動作し、いずれかを送信できます。しかし、1つのAjaxリクエストが行われるとすぐに、無効なCSRFトークンのために私が投稿するフォームは拒否されます。
私はいくつかの投稿を見つけましたが、本当に役に立たなかったのですが、どうやってAJAXリクエストがフォームを無効にするのを防ぐことができますか?後で私は角を使ってPOST要求をしなければならないでしょう、私は同じ問題があると思います。