[英]$http response Set-Cookie not accessible
我目前正在为我的后端编写一个 angularjs 前端,我遇到了一个常见的问题:
服务器在响应中发回 cookie,但被 angular.js 完全忽略(甚至无法打印出“Set-Cookie”值)。
我试过阅读
AngularJS 忽略 HTTP 标头中的 Set-Cookie<\/a>
Angularjs $http 似乎不理解响应中的“Set-Cookie”<\/a>
但不幸的是,我已经尝试了那里的所有解决方案,但似乎不起作用。
已发送请求
收到回复
我正在使用 angular.js (v1.2.10),这是我用来发出请求的
$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;
});
我查看了$httpBackend
源代码:
xhr.onreadystatechange = function() {
// some code
if (xhr && xhr.readyState == 4) {
var responseHeaders = null,
response = null;
if(status !== ABORTED) {
responseHeaders = xhr.getAllResponseHeaders();
// some code
它使用XMLHttpRequest#getAllResponseHeaders
来获取响应头。
经过一番搜索,我发现了这个问题: xmlHttp.getResponseHeader +不适用于CORS
这让我意识到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){
$timeout(function(){
console.log($cookies.session)
});
})
}
})
我使用$timeout
因为$cookies
仅在摘要后与浏览器的cookie同步。
你是否真的需要在Angular中读取cookie,或者它是否足够,如果它被设置并传回浏览器的进一步请求? 虽然我无法让前者工作,但我能够以非常相似的配置让后者快速工作。 (特别是,我无法使用$cookies
作为@Ilan推荐。它什么也没有返回。)
首先,在Angular端配置$httpProvider
默认发送withCredentials
:
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
}]);
这就是你在Angular所要做的一切。 请注意,此时,如果您尝试读取$cookies
它仍然无法看到cookie,但它会被保存并将在未来的AJAX调用中传递。
然后,在服务器上,您需要提供CORS下允许的特定域(或一组域)以及Access-Control-Allow-Credentials
标头。 我的后端是Flask in Python with Flask-Restful ,它看起来像这样:
import Flask
from flask_restful import Api
app = Flask(__name__)
api = Api(app)
api.decorators = [cors.crossdomain(origin='http://localhost:8100', credentials=True)]
这就是全部。 现在,Angular(或者更确切地说,浏览器)设置cookie并将其与未来的请求完全透明地返回!
(同样的观点在这里: https : //stackoverflow.com/a/19384207/2397068 。)
在Angular 1.3.14中它不再起作用。
我有同样的问题。 我正在使用$ resource并声明withCredentials:true。
var fooRes = $resource('/address/exemple',
{},
{
bar: {
method: 'POST',
withCredentials: true,
}
}
);
fooRes.bar({
"stuff" : "lorem"
}).$promise.then(function(){
//callback
})
或者您可以设置标题“Access-Control-Allow-Credentials”,“true”。
现在cookie将被保存,您可以使用$ cookie。
希望它会有所帮助。
您需要修改.htaccess文件以允许读取标头。
Header set Access-Control-Allow-Headers Content-Type
设置'access-control-expose-headers', '*'
节点 API 示例
router.get('/your-route', async (req, res) => {
//..
res.setHeader('access-control-expose-headers', '*' );
//..
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.