Angular IE11丢弃请求头XHR

我目前正在开发一个Angular应用程序，它利用Angular的httpClient将数据发布到api。除了IE11之外，这篇文章在其他浏览器中也能很好地工作。在IE11中发布帖子时，我收到一个403，在做了一些挖掘之后，我发现IE11正在删除我的请求头，其中包含API所需的密钥。如果我刷新页面，应用程序将重新加载，并出于某种原因使API调用正常。在下面的代码示例中，“securityKey”键是要删除的内容

我尝试添加其他键，以查看是否正是该特定键导致了问题，但所有键似乎都被删除。甚至内容类型也会被删除并设置为text/plain

  return this.httpClient.post(
            `${baseUrl}/test`,
            request,
            {
                headers: {
                    'Content-Type': 'application/json',
                    'securityKey': 'foobar',
                },
            },
        );

与其他浏览器一样，此代码应该使用定义的请求头进行post调用，以便发送安全密钥

更新

我的代码已更新为以下内容，但现在没有设置x-api-key。此代码解决了由于内容类型设置不正确而导致类似CORS错误的问题。现在的问题是x-api-key的头键被删除或只是没有设置。这仅在第一次页面加载时发生，刷新后标题设置得很好

public makeAPIcall(request) {      
    return this.httpClient.post(
         `${baseUrl}/test`,
         request,
         { headers: this.getHeaders() },
    );
}

private getHeaders(): HttpHeaders {
    const headers = new HttpHeaders();
    headers.append('content-type', 'application/json');
    headers.append('x-api-key', environment.key);

    return headers;
}

---

从你上面的评论来看，这听起来像是一个错误

对于可能对服务器数据产生副作用的HTTP请求方法（特别是对于除

GET

以外的HTTP方法，或者对于使用某些MIME类型的

POST

），浏览器将发送“飞行前”请求。然后，在服务器“批准”后，它使用实际HTTP请求方法发送实际请求

---

application/json

不是一个，因此它可能会触发“预飞行”。您可以尝试使用代码来检查返回的数据类型，并在IE中发出第二个请求。

从上面的评论来看，这听起来像是一个错误

对于可能对服务器数据产生副作用的HTTP请求方法（特别是对于除

GET

以外的HTTP方法，或者对于使用某些MIME类型的

POST

），浏览器将发送“飞行前”请求。然后，在服务器“批准”后，它使用实际HTTP请求方法发送实际请求

---

application/json

不是一个，因此它可能会触发“预飞行”。您可以尝试使用代码检查返回的数据类型，并在IE中发出第二个请求。

这看起来像是CORS问题。您可以尝试调用自己的域API，而不是从浏览器向其他域调用API。解释IE实现XHR对象的错误，您可以检查它。我还发现，您可以参考它了解更多信息。因此，进一步检查后，内容类型似乎被IE改写。在上面的代码中，我们将内容类型设置为application/json，但在请求中，它被设置为“text/plain；charset=UTF-8”。每次刷新时，内容类型都会正确设置，并按预期工作，有什么想法吗？看起来像是CORS问题。您可以尝试调用自己的域API，而不是从浏览器向其他域调用API。解释IE实现XHR对象的错误，您可以检查它。我还发现，您可以参考它了解更多信息。因此，进一步检查后，内容类型似乎被IE改写。在上面的代码中，我们将内容类型设置为application/json，但在请求中，它被设置为“text/plain；charset=UTF-8”。每次刷新时，内容类型都会正确设置，并按预期工作，有什么想法吗？我已经更新了我的问题，我取得了一些进展，但由于某些原因，HttpHeard不遵守x-api-key。您是否尝试使用代码来提出第二个请求？详细的错误信息是什么？我还认为第一次装载是飞行前的请求。我发现和你的情况相似。正如它所说的，这是服务器端的问题，您应该在服务器端允许

accesscontrolallowheaders

。请查看详细信息。请尝试我上面提到的方法，如果问题仍然发生，那么如果您共享一个简单的示例来帮助复制它，可能会更好。因此，在应用程序刷新之前，IE 11似乎不会发送预飞行。我在网络选项卡中看到POST通话，但没有选项通话。CORS在两端都按预期工作，但取决于标头的构建方式，可能不发送预飞，也可能发送预飞，但预飞中缺少标头，从而导致类似CORS的错误。我已更新了我的问题，我已经取得了一些进展，但由于某些原因，HttpHeard不遵守x-api-key。您是否尝试使用代码来提出第二个请求？详细的错误信息是什么？我还认为第一次装载是飞行前的请求。我发现和你的情况相似。正如它所说的，这是服务器端的问题，您应该在服务器端允许

accesscontrolallowheaders

。请查看详细信息。请尝试我上面提到的方法，如果问题仍然发生，那么如果您共享一个简单的示例来帮助复制它，可能会更好。因此，在应用程序刷新之前，IE 11似乎不会发送预飞行。我在网络选项卡中看到POST通话，但没有选项通话。CORS在两端都按预期工作，但取决于标头的构建方式，可能不发送预飞，也可能发送预飞，但预飞中缺少标头，从而导致类似CORS的错误。