CORS header ‘Access-Control-Allow-Origin’ missing when .NET Core API catches an error

Question

I have a .NET Core API that catches errors in several scenarios. One of which is when a call returns no data. When no data is return, a 200ok is received with an error of message stating that no data was returned.

In my API, I have CORS configured in startup:

app.UseCors(builder => builder
            .AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials());

And I have it registered before my MVC:

services.AddCors();

services.AddMvc();

This works great when the request is successful on the back end API, but if I catch an error... like when no data is returned from the server, I receive this in console:

Client Side Error:  Object { headers: {…}, status: 0, statusText: "Unknown Error", url: null, ok: false, name: "HttpErrorResponse", message: "Http failure response for (unknown url): 0 Unknown Error", error: error }

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:52706/api/peoplecategories. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]

With the error handling I do in my Angular App, I assume that I should be receiving the error response returned from the catch in my API, but instead I get this CORS error and the Unknown response.

Here is the exact same call in Postman, along with its subsequent response:

Answer 1

You must return valid JSON response from back-end. Validated your response once again.