Question

我正在研究Symfony 3.2，并且我试图在某些页面上使用AngularJS的一些AJAX请求。

我有以下HTML代码：

<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>

使用javascript：

  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(); 
  });

在页面的某些位置，我也有symfony表单，只需将{{ form(form_name) }}放在那里。

如果我不允许任何AJAX请求发生（即，我删除了$scope.fetch();并且从不点击也触发请求的按钮），我的表单工作正常，我可以提交任何一个。但是，只要发出一个ajax请求，我发布的任何表单都会因为CSRF令牌无效而被拒绝。

我发现了一些帖子，但没有一个真的有帮助，我怎么能阻止我的AJAX请求使表单无效？稍后我还要用角度发出POST请求，我想我会遇到同样的问题。

Answer 1

好的，经过一些尝试和调试后，我实际上发现，通过编写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;，以便在开发环境中进行测试时，请求也会发送到开发环境。现在一切正常。

AngularJS Http GET使CSRF令牌无效

1 个答案: