带有发布请求的 Angular 6 标头不起作用答案

【问题标题】：Angular 6 headers with post request does't work带有发布请求的 Angular 6 标头不起作用
【发布时间】：2019-04-15 09:59:55
【问题描述】：

我的前端使用 Angular 6，服务器使用基于 Core2 的 Web API。我写了这段代码，当我使用 ASP.NET 客户端时，它可以工作，但是使用 Angular 我遇到了一些麻烦。

services.AddMvc():
services.AddCors(o => o.AddPolicy("FreePolicy", builder =>
{
    builder.WithHeaders(<redacted>)
    //builder.AllowAnyHeader()
    .AllowCredentials()
    .AllowAnyMethod()
    .AllowAnyOrigin();
}));

如果我评论 builder.WithHeaders 并取消评论 builder.AllowAnyHeader，错误就会消失，否则 Angular 会崩溃。

我的标题：

这看起来像是因为“MaybeUnknown”而出现错误的地方。您可以在值周围看到括号，因此这看起来像一个数组。我可以修复它吗？它会解决我的问题吗？

如果我不取消注释 builder.AllowAnyHeader，我在服务器上发布请求后会出现错误。

更新

我在服务器端的标题

客户端上的我的标题

更新 2 配置方法

更新 3

【问题讨论】：

根据您的描述，我猜您正在发送带有自定义标头的请求，但您没有同时在服务器端配置标头。检查客户端的 ajax 和服务器端的标头。如果您仍然无法解决问题，请向我们展示 WithHeaders(<redacted>) 行和 Angular 中的 ajax 部分代码，让我们知道将发送到服务器的内容。
@itminus 我更新了帖子，请检查一下。谢谢。

标签： c# angular asp.net-core cors

【解决方案1】：

从您发布的最新屏幕截图中可以清楚地看出，该屏幕截图显示了通过 Chrome 发出的 HTTP 请求，您的 WithHeaders 调用中缺少标头。如果您查看请求中的 Access-Control-Request-Headers，您会看到它包含四个标头：

哎呀
客户端 ID
zump-api-版本
内容类型

但是，您的WithHeaders 调用确实不包含Content-Type，因此您需要添加：

builder.WithHeaders("client-id", "zump-api-version", "apiss", "content-type")
    ...

注意：这都是不区分大小写的，所以你可以用你喜欢的任何方式来区分大小写。

在 MDN 文档中有更多相关信息：Access-Control-Allow-Headers，其中包括以下解释：

请注意，某些标头始终是允许的：Accept、Accept-Language、Content-Language、Content-Type（但仅限应用程序/x-www-form-urlencoded 的解析值（忽略参数）的 MIME 类型，多部分/表单数据或文本/纯文本）。这些称为简单标头，您无需明确指定它们。

这解释了为什么您不必指定 Accept（它是一个“简单的标头”）。您确实必须在示例中指定Content-Type，因为它既不是上述语句中引用的三种 MIME 类型。

【讨论】：