Angular migration: CORS issue [duplicate] - asp.net

Question

This question already has an answer here:
How to send an HTTP 4xx-5xx response with CORS headers in an ASPNET.Core web app?
(1 answer)
Closed 3 years ago.
I am migrating and existing angular js app to angular while sticking to an existing api.
I tried to implement a logon (ASP NET / OWIN) and encountered following situation after making a http request to logon endpoint:
All possible server responses (2xx,4xx,5xx) could not be fetched in javascript code.
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.
So I added following to ValidateClientAuthentication in API:
context.Response.Headers.Append("Access-Control-Allow-Origin", "http://localhost:4200");
context.Response.Headers.Append("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
Now I am finally able to fetch 2xx responsed but still do not get 4xx and 5xx results.
Why is that?
And how is it possible that API calls to other endpoints of same API do not require setting those headers?
UPDATE:
I receive this error message for all 4xx responses even if I have added those headers in API:
: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)
UPDATE 2:
this is the code that handles http request:
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
});
UPDATE 3:
As I understood CORS middleware might(?) drop all heades in case 4xx or 5xx responses which will prevent browsers from fetching responses. But like you can see my 400 response from a different endpoint on my api seems to be valid:
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"}]
still I encounter the mentioned error message.

Answer 1

Most likely your ASP.NET backend doesn't have CORS enabled, according to the fact that if you set it manually you're able to make a request. If you set a header (e.g. Content-Type) to your request, whether it was manually set or automatically, Angular sends a preflight request for the backend to determine if the resource can be accessed with the specific request headers or not.
There's a built-in support for preflight request handling, which you can enable using attributes to your controllers, and a little configuration in the initial startup class.
For ASP.NET (.NET Framework based) check this guide: https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api
For ASP.NET Core check this one: https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.0