Angular 迁移：CORS 问题 [重复]

Question

这个问题在这里已经有了答案：

如何在 ASPNET.Core web 应用程序中发送带有 CORS 标头的 HTTP 4xx-5xx 响应？ (1 个回答)

1 年前关闭。

我正在将现有的 angular js 应用程序迁移到 angular，同时坚持现有的 api。 我尝试实现登录（ASP NET / OWIN）并在向登录端点发出 http 请求后遇到以下情况：在 javascript 代码中无法获取所有可能的服务器响应（2xx、4xx、5xx）。 After researching I found the cause: CORS This is because new angular app runs on different port than the locally hosted api while the old angular js ab is being hosted on the same port.

所以我在 API 的ValidateClientAuthentication中添加了以下内容：

  context.Response.Headers.Append("Access-Control-Allow-Origin", "http://localhost:4200");
            context.Response.Headers.Append("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");

现在我终于能够获取 2xx 响应但仍然没有得到 4xx 和 5xx 结果。 这是为什么？ API 调用同一 API 的其他端点怎么可能不需要设置这些标头？

更新：即使我在 API 中添加了这些标头，我也会收到所有 4xx 响应的此错误消息：

:63323/api/logon:1 Failed to load resource: the server responded with a status of 400 (Bad Request)
vendor.js:68504 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (vendor.js:158625)
    at subscribeToResult (vendor.js:158782)
    at CatchSubscriber.error (vendor.js:151269)
    at MapSubscriber.Subscriber._error (vendor.js:147999)
    at MapSubscriber.Subscriber.error (vendor.js:147979)
    at XMLHttpRequest.onLoad (vendor.js:24621)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2785)
    at Object.onInvokeTask (vendor.js:70070)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2784)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2557)

更新 2：这是处理 http 请求的代码：

 return this.httpClient
            .post(this.appConfigService.buildAuthorizationUrl('/logon'), data, {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            })
            .toPromise()
            .then(
                (response: any) => {
                    // hit when 2xx and cors headers present
                },
                (error: any) => {
                    // never hit
                }
            )
            .catch(error => {
                    // never hit
            });

更新 3：据我了解，CORS 中间件可能（？）在 4xx 或 5xx 响应的情况下丢弃所有标题，这将阻止浏览器获取响应。 但就像你可以看到我的 api 上不同端点的 400 响应似乎是有效的：

HTTP/1.1 400 Bad Request
Cache-Control: private,no-cache, no-store, must-revalidate
Pragma: no-cache
Content-Length: 112
Content-Type: application/json; charset=utf-8
Expires: 0
Server: Microsoft-IIS/10.0
Access-Control-Allow-Origin: http://localhost:4200
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcS2F5IFphbmRlclxEb2N1bWVudHNcZXZlXFNvdXJjZVxJbmZvcnNIVC5HZW5lc2lzQXBpXGF1ZGl0dHJhaWw=?=
X-Powered-By: ASP.NET
X-UA-Compatible: IE=edge
Date: Wed, 06 Nov 2019 16:01:08 GMT

[{"ErrorMessage":"Der Objektverweis wurde nicht auf eine Objektinstanz festgelegt.","PropertyName":"Exception"}]

我仍然遇到提到的错误消息。

Answer 1

您的 ASP.NET 后端很可能没有启用 CORS，因为如果您手动设置它，您就可以发出请求。 如果您为请求设置了 header（例如 Content-Type），无论是手动设置还是自动设置，Angular 都会向后端发送预检请求，以确定是否可以使用特定的请求标头访问资源。

有一个对预检请求处理的内置支持，您可以使用控制器的属性启用它，并在初始启动 class 中进行一些配置。

对于 ASP.NET（基于 .NET Framework），请查看本指南： https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

对于 ASP.NET 核心检查这个： https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.0