IE11删除请求报头XHR

Question

目前，我正在开发一个应用程序，该应用程序利用角的httpClient将数据发布到api中。除了IE11之外，post在其他浏览器中运行得非常好。当在IE11中发布Post时，我收到了一个403，在做了一些调查之后，我发现IE11正在删除包含API所需密钥的请求头。如果我刷新页面，应用程序将重新加载，并使API调用只是出于某种原因。在下面的代码示例中，"securityKey“键是要删除的内容。

我尝试添加其他键，看看是否只是导致问题的特定键，但是所有的键都会被删除。甚至内容类型也会被设置为text/平原。

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

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

更新

我的代码已经更新到以下内容，但现在还没有设置x-api键。这段代码解决了内容类型没有被正确设置这一事实，从而导致了CORS的错误。现在的问题是x-api-键的头键被删除或没有设置。这只有在第一个页面加载时才会发生，在刷新之后，标题就会被设置得很好。

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;
}

Answer 1

从你上面的评论来看，这听起来像一个“飞行前”请求。

对于可能对服务器数据造成副作用的HTTP方法(特别是对于GET以外的HTTP，或某些MIME类型的POST使用)，浏览器将发送一个“预飞”请求。然后，在得到服务器的“批准”后，它使用实际的HTTP请求方法发送实际请求。

application/json不是简单请求，所以它可能触发“预飞”。您可以尝试使用代码来检查返回的数据类型，并在IE中发出第二个请求。