Angular 2 不会使用 CORS 保存我的身份验证 Cookie
Posted
技术标签:
【中文标题】Angular 2 不会使用 CORS 保存我的身份验证 Cookie【英文标题】:Angular 2 doesn't save my Authentication Cookie with CORS 【发布时间】:2017-12-27 08:18:44 【问题描述】:我有一个 Angular 2 应用程序,它应该向 Node Express 后端进行身份验证,它向后端发送登录请求并接收 cookie。它应该在每个连续的请求中发送这个 cookie(它不会)。
我的 Angular 应用中有:
类 LoginService
private requestOptions = new RequestOptions(headers: this.headers, withCredentials: true);`
login(username: string, password: string): Promise<boolean>
return this.http.post(this.myUrl + "login",
JSON.stringify(username:username, password: password), this.requestOptions)
.toPromise()
.then(res => true)
.catch(this.handleError);
一些数据服务
private requestOptions = new RequestOptions(headers: this.headers, withCredentials: true)
getData(): Promise<any>
return this.http.get(this.myUrl, this.requestOptions)
.toPromise()
.then (res => res.json())
.catch(this.handleError)
在我的节点后端,我有:
response.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
response.header("Access-Control-Allow-Origin", http://localhost:4200);
response.header('Access-Control-Allow-Credentials', true);
response.header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept');
当我以角度发送登录请求时,我可以看到它在服务器端被接受,但是当我发送连续请求时,它给了我 401 未授权,如果您未通过身份验证,这是我发送的错误。
但是,当我通过 HttpRequester(用于 HTTP 请求的 Firefox 插件)发送登录请求时,我可以访问我的 Angular 应用程序中的所有数据。
我的角度版本是 2.4.10
+++更新+++
所以,我做了一些测试,发现只要我使用相同的服务,我的身份验证就可以正常工作。
我有一个名为 login.service.ts 的服务和一个名为 data.service.ts 的服务。
我能做什么: 通过 login.service.ts 登录并通过 login.service.ts 获取数据。
我不能做什么: 通过 login.service.ts 登录并继续使用 data.service.ts。
这对我的用例来说不是很实用。 有人对此有什么想法吗?
【问题讨论】:
【参考方案1】:我有你的情况。有了 Maciej 的回答,我解决了我的问题。
我将 withCredentials: true
添加到已经包含标题的请求选项中。
然后在服务器端,在我的 express 基本文件 server.js
上,我添加了
var cors = require("cors");
var corsSettings =
origin: true,
methods: ['POST'],
credentials: true
;
app.use(cors(corsSettings));
我实际上排除了Access-Control-Allow-Origin:*
,所以我唯一的标头(服务器端)是
app.use(function (req, res, next)
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, access-control-allow-origin, access-control-allow-headers");
next();
);
只是想指出,正如 Maciej 所提到的,您的请求中需要一些实体。因此,即使您的查询不需要它,您也需要使用空的正文字符串来调用它。
const jsonHeads = new Headers();
jsonHeads.append('Content-Type', 'application/x-www-form-urlencoded');
jsonHeads.append('Access-Control-Allow-Origin', '*');
jsonHeads.append('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, access-control-allow-origin');
options = headers : myHeaders, withCredentials: true
this.http.post('http://myApi:8080/list', '', options);
通过这种方式,Angular 开始正确发送 cookie 并进行身份验证。我希望这有帮助。几个小时前我自己需要这个。
【讨论】:
【参考方案2】:默认情况下 Angular 不发送 cookie。尝试将 withCredentials: true
传递给您的 RequestOptions:
let options = new RequestOptions( headers: headers, withCredentials: true );
this.http.post(this.connectUrl, <stringified_data> , options);
【讨论】:
我确实在两个请求中定义了请求选项,登录和另一个。我做错了吗? 您是否提供了withCredentials: true
?
它说 new RequestOptions(headers: this.headers, withCredentials: true)。这是正确的吗?
如果你有任何标题,那么是的。如果没有,您可以简单地提供withCredentials: true
好吧,对于 GET 请求,我实际上不需要任何标头。但是,如果我将它们排除在外,行为不会改变。但是,如果我不在我的 Angular 应用程序中使用登录请求,而是使用我的浏览器的 HTTP 请求插件执行请求,我可以在我的 Angular 应用程序中继续处理所有其他请求以上是关于Angular 2 不会使用 CORS 保存我的身份验证 Cookie的主要内容,如果未能解决你的问题,请参考以下文章
使用 Angular JS、cors 调用 symfony 2 rest api
如何在 Heroku 上使用我的 Angular 应用程序解决 CORS 问题
无法使用 cors 从 angular 2 获取所有响应标头
如何使用 .NET Core 2 配置 Angular 6 以允许来自任何主机的 CORS?