Question

我要迁移现有的angular js应用程序，并坚持使用现有的api。我尝试实现登录（ASP NET / OWIN），并在发出HTTP请求登录终结点后遇到以下情况：无法通过JavaScript代码获取所有可能的服务器响应（2xx，4xx，5xx）。经过研究，我找到了原因：CORS 这是因为新的angular应用程序在与本地托管的api不同的端口上运行，而旧的angular js ab在同一端口上托管。

因此，我在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：据我了解，在4xx或5xx响应的情况下，CORS中间件可能会放弃所有标题，这将阻止浏览器获取响应。但是就像您可以看到我的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：如果您手动设置它，则可以发出请求。如果您为请求设置标头（例如Content-Type），无论是手动设置还是自动设置的，Angular都会为后端发送预检请求，以确定是否可以使用特定的请求标头访问资源。

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

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

对于ASP.NET Core，请检查以下一项：https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.0

角度迁移：CORS问题

1 个答案: