Angular WithCredentials 不适用于 POST、PUT答案

【问题标题】：Angular WithCredentials not working for POST, PUTAngular WithCredentials 不适用于 POST、PUT
【发布时间】：2018-05-02 09:02:19
【问题描述】：

我正在开发一个 Angular 网站：

• localhost/test 上的 .Net Framework 服务器

• 本地主机上的客户端：4200

我的 cookie 身份验证工作正常，我的 GET 请求工作正常。

   this.httpClient.get<Test>('dummyUrl', { withCredentials: true });

在我的服务器的 web.config 中，我有以下内容。

    <add name="Access-Control-Allow-Credentials" value="true"/>
    <add name="Access-Control-Allow-Origin" value="http://localhost:4200" />
    <add name="Access-Control-Allow-Methods" value="*" />

鉴于此设置，我希望 PUT 和 POST 请求同样适用。

    this.httpClient.put('dummyUrl', this.payload, { withCredentials: true });

我从这里得到了 401 Unauthorized。

我的调查

我看到的请求方法是 OPTIONS，它告诉我这在飞行前失败了，并且这个问题与 CORS 而不是 Angular 有关。我一直无法弄清楚我错过了什么。

如果您有任何指导，我将不胜感激。

【问题讨论】：

你能解决问题的地方，我面临的问题完全一样

标签： .net angular cors httpclient

【解决方案1】：

如果您在前端使用带角度的asp net core api，那么在web api中，启动设置（在configure方法下），

设置以下设置

        app.UseCors(options =>
        {
            options.SetIsOriginAllowed(origin => true);
            //options.AllowAnyOrigin();
            options.AllowAnyHeader();
            options.AllowAnyMethod();
            options.AllowCredentials();   <-- This one is important
        });

它应该可以工作。

【讨论】：

stackoverflow.com/questions/61279426/…
options.AllowCredentials() 是 http post 工作所必需的，它修复了 CORS 问题

【解决方案2】：

试试下面的代码。

import { RequestOptions, Headers } from '@angular/http';

let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers, withCredentials: true });

this.httpClient.put('dummyUrl', this.payload, options);

【讨论】：

感谢您的回答。 RequestOptions 已被弃用，所以我觉得我应该避免它。为了调试，我还是尝试了它并得到了相同的 401 行为。

【解决方案3】：

我也遇到了类似的问题，即使在我的 POST 请求中使用{withCredentials: true}。

在处理 CORS 的 Spring Boot 服务器代码中，我将 Access-Control-Allow-Origin 标头设置为 *。我将 * 更改为 http://localhost:4200，我的 Angular 应用程序就是从那里提供服务的。

之后一切正常。希望这可以帮助某人。

【讨论】：