[英]AngularJS Http GET invalidates CSRF Token
I'm working on Symfony 3.2 and I'm trying to use some AJAX requests with AngularJS on some pages. 我正在使用Symfony 3.2,并且尝试在某些页面上将一些AJAX请求与AngularJS一起使用。
I have the following HTML code : 我有以下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>
With the javascript: 使用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();
});
And at some points in the page, I also have symfony forms that are simply put there with {{ form(form_name) }}
. 在页面的某些点上,我还有一些symfony表单,这些表单只是用
{{ form(form_name) }}
放在那里。
If I don't let any AJAX request happen (ie, I remove the $scope.fetch();
and never click the button that also triggers the request), my forms work fine and I can submit any of them. 如果我不让任何AJAX请求发生(即,我删除了
$scope.fetch();
并且从不单击也会触发该请求的按钮),那么我的表单就可以正常工作,并且我可以提交任何表单。 But as soon as one ajax request is made, whatever form I post is rejected because of an invalid CSRF token. 但是,一旦发出一个Ajax请求,由于无效的CSRF令牌,我发布的任何形式都会被拒绝。
I found some posts but none of them really helped, how can I prevent my AJAX requests from invalidating the forms ? 我找到了一些帖子,但没有一个真正有用,如何防止我的AJAX请求使表格无效? Later on I'll have to also make POST requests with angular, I guess I'll have the same issue.
稍后,我还必须使用angular发出POST请求,我想我也会遇到同样的问题。
Ok so after some tries and debugging I actually figured out that, by writing var uri = "/api/timeline/{{ app.user.id }}/" + $scope.offset;
好的,经过一些尝试和调试,我实际上通过写
var uri = "/api/timeline/{{ app.user.id }}/" + $scope.offset;
the request was made to the production environment, while I'm currently testing in the dev environment with my browser. 请求是针对生产环境的,而我目前正在使用浏览器在开发环境中进行测试。 Hence the ambiguities on sessions.
因此,会议上的歧义。
A simple solution was to change this to var uri = "/{% if app.environment == 'dev' %}app_dev.php/{% endif %}api/timeline/{{ app.user.id }}/" + $scope.offset;
一个简单的解决方案是将其更改为
var uri = "/{% if app.environment == 'dev' %}app_dev.php/{% endif %}api/timeline/{{ app.user.id }}/" + $scope.offset;
so that, when testing in dev environment, the requests are also sent to dev environment. 因此,在开发环境中进行测试时,请求也将发送到开发环境中。 Everything is working alright now.
现在一切正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.