Question

我正在使用Ionic Framework v4构建与预先存在的API交互的应用程序。该API使用Cookie来验证会话。我正在使用Angular 7的HttpClient类来执行POST请求。

我的帖子功能：

public post = (req:string, body?:any, session?:string) => {

    let defaultHeaders = [
        'accept: text/html',
        'Access-Control-Allow-Credentials: true',
        'Content-Type: application/x-www-form-urlencoded, multipart/form-data, application/json, text/plain',
        'Access-Control-Allow-Origin: ' + window.location.host,
        'Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token, Authorization, Lang'
        // 'Authorization: SESSION='+session, // the api doesn't recognize this
        // 'Cookie: SESSION='+session // seems to be a `forbidden` name to place in a header
    ];
    let defaultOptions = <any> {
        headers: defaultHeaders
    };
    return this.http.post<Response>(this.baseUrl+req, body, defaultOptions);
}

我可以登录，并提供一个用于验证会话身份的cookie。但是，在随后的POST请求中都没有将cookie发送回API服务器。

尽管这些API是基于其他技术构建的，但它可以与其他接口完美配合。

我尝试过的事情：

将{withCredentials: true}添加到选项。这会破坏所有内容并返回通用400错误。
在标头中添加Cookie，该标头为forbidden
使用效果为零的ng2-cookies。
将cookie存储在localStorage中，但是在以后的请求中仍然没有发送它。

更令人沮丧的是，如果cookie不存在，则任何需要发送此cookie的请求都将删除我发送的标头。如果不通过浏览器自动发送cookie，您将如何使用Angular的POST通过HTTPClient发送cookie？似乎没有选择！

必须有一种同时使用Cookie和Ionic的方法。那里有太多API仍在使用cookie进行身份验证。使用localStorage存储信息是一回事，但是如何在响应中包括它呢？

作为参考，以下是成功登录的样子：

Answer 1

Angular HttpClient可能会阻止您的cookie，因为令牌没有存储为XSRF-TOKEN。您可以尝试HttpClientXsrfModule并根据您的API设置Cookie和标头名称。

或者，一种解决方法是使用本机HTTP client，在每个request中手动发送cookie，并使用SQLite之类的东西进行存储。

Answer 2

一些建议：

尝试在设置时从Cookie中删除SameSite = Lax并检查一次，还请确保您未将Cookie设置为secure = true，因为在HTTP请求上，浏览器不会将Cookie发送回去。我曾经以secure = true遇到过这个问题。

Answer 3

首先，您不应该使用JavaScript处理会话cookie。这些浏览器会处理它们，并将它们自动添加到您的请求标头中。 Cordova应用程序和WebViews的工作原理相同。

由于cookie具有标志“ HttpOnly”，因此您的应用无法读取它。

您的问题来自标志“ SameSite = Lax”。此选项告诉浏览器在请求方法为POST时不发送cookie（实际上，它几乎仅与GET请求一起发送cookie）。此选项用于保护您的API免受CSRF攻击，是一种很好的做法。

离子应用程序是在Cordova容器内或以开发模式在本地服务器上执行的。从您的应用程序的角度来看，当前URL是localhost：8100（我们可以在“来源”中看到）。但是您的后端域可能是其他东西。因此，您有一个“跨站点请求”，并且不会为POST请求发送cookie。

Cookies选项由后端服务器设置。将cookie选项更改为SameSite = None。但是，您将需要使用CSRF令牌实现CSRF保护（这是每个人在2019年所做的事情，比SameSite选项更安全）。使用现代框架通常很容易。

所有传统浏览器都不会遇到此问题。假设您的后端URL是“ https://my-url.com”。从浏览器的角度来看，您当前的URL也是“ https://my-url.com”。因此，这不是跨站点请求，因此将发送cookie。

我希望我的解释足够清楚。祝你好运：）

通过带有cookie的POST发送HTTP请求[ionic v4]

3 个答案: