AngularJS Http GET 使 CSRF 令牌无效答案

【问题标题】：AngularJS Http GET invalidates CSRF TokenAngularJS Http GET 使 CSRF 令牌无效
【发布时间】：2017-06-17 02:01:15
【问题描述】：

我正在开发 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 请求使表单无效？稍后我还必须使用 Angular 发出 POST 请求，我想我也会遇到同样的问题。

【问题讨论】：

标签： javascript angularjs ajax symfony csrf

【解决方案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;，以便在开发环境中进行测试时，请求也会发送到开发环境。现在一切正常。

【讨论】：