2017-01-31 7 views
0

私は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要求をしなければならないでしょう、私は同じ問題があると思います。

答えて

0

私は実際には、var uri = "/api/timeline/{{ app.user.id }}/" + $scope.offset;と書いて、私は実際に私のブラウザで開発環境でテストしている間に、本番環境にリクエストが行われたことを実証しました。したがってセッションのあいまいさ。

簡単な解決策は、これをvar uri = "/{% if app.environment == 'dev' %}app_dev.php/{% endif %}api/timeline/{{ app.user.id }}/" + $scope.offset;に変更することでした。これにより、開発環境でテストするときに、要求が開発環境にも送信されるようになりました。すべてが今、問題なく動いています。

関連する問題