$http 响应 Set-Cookie 不可访问 [英] $http response Set-Cookie not accessible
问题描述
我目前正在为我的后端编写一个 angularjs 前端,但我遇到了一个比较常见的问题:
服务器在响应中发送一个 cookie,但被 angular.js 完全忽略(甚至无法打印出 'Set-Cookie' 值).
我试过阅读
这让我意识到 XHR 的规范不支持 SET-COOKIE
,所以它与 angular.js 没有任何关系.
http://www.w3.org/TR/XMLHttpRequest/#the-getallresponseheaders%28%29-method
<块引用>4.7.4 getAllResponseHeaders() 方法
返回响应中的所有标头,字段名称为 Set-Cookie 或 Set-Cookie2 的标头除外.
<小时>
相反,只需使用 $cookies
:
这是一个不同的模块,所以你必须将它添加到你的脚本中
<script src="angular.js"></script><script src="angular-cookies.js"></script>
并将其添加到模块依赖项中:
var app = angular.module('app',['ngCookies']);
然后像这样使用它:
app.controller('ctrl', function($scope, $http, $cookies, $timeout){$scope.request = function(){$http.get('/api').then(function(response){$超时(功能(){控制台日志($cookies.session)});})}})
我使用 $timeout
因为 $cookies
只在摘要后与浏览器的 cookie 同步.
I'm currently writing an angularjs frontend to my backend, and I'm running into a somewhat common issue:
Server sends a cookie back in a response, but is completely ignored by angular.js (can't even print out the 'Set-Cookie' value).
I've tried reading
Set-Cookie in HTTP header is ignored with AngularJS
Angularjs $http does not seem to understand "Set-Cookie" in the response
but unfortunately I've tried all the solutions there and just doesn't seem to work.
Request sent
Response received
I'm using angular.js (v1.2.10), and this is what I used to make the request
$http.post('/services/api/emailLogin',
sanitizeCredentials(credentials),
{
withCredentials: true
}).success(function(data, status, header) {
console.log(header('Server'));
console.log(header('Set-Cookie'));
console.log(header('Access-Control-Allow-Headers'));
console.log(header('Access-Control-Allow-Methods'));
console.log(header);
}).then(
function(response) {
console.log(response);
return response.data;
});
withCredentials=true
is set on the client side before making the request.
Access-Control-Allow-Credentials=true
is set on the server side before returning the response.
You can clearly see Set-Cookie
is in the response headers from Chrome Developer Tools, but printout is just
Only Set-Cookie
in the response header is not being printed out. I'm wondering why does this occur? Is there a way for me to make sure withCredentials=true
is indeed set (I didn't see it in the request header)?
Any help is appreciated!
I looked inside $httpBackend
source code:
xhr.onreadystatechange = function() {
// some code
if (xhr && xhr.readyState == 4) {
var responseHeaders = null,
response = null;
if(status !== ABORTED) {
responseHeaders = xhr.getAllResponseHeaders();
// some code
It uses XMLHttpRequest#getAllResponseHeaders
to get the response headers.
After a little search I found this question: xmlHttp.getResponseHeader + Not working for CORS
Which made me realize that XHR by it's specification, doesn't support SET-COOKIE
, so it have nothing to do with angular.js in particular.
http://www.w3.org/TR/XMLHttpRequest/#the-getallresponseheaders%28%29-method
4.7.4 The getAllResponseHeaders() method
Returns all headers from the response, with the exception of those whose field name is Set-Cookie or Set-Cookie2.
Instead just use $cookies
:
It's a different module so you must add it to your scripts
<script src="angular.js"></script>
<script src="angular-cookies.js"></script>
And add it to the module dependencies:
var app = angular.module('app',['ngCookies']);
Then just use it like so:
app.controller('ctrl', function($scope, $http , $cookies, $timeout){
$scope.request = function(){
$http.get('/api').then(function(response){
$timeout(function(){
console.log($cookies.session)
});
})
}
})
I use $timeout
because $cookies
only synchronize with browser's cookies after a digest.
这篇关于$http 响应 Set-Cookie 不可访问的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!