I’m here to share the problem I’ve been facing for the past two days, which I finally solved today. I’m developing an application using .NET for the backend and Angular for the frontend. In the user registration part, I needed to retrieve some data from the registration form. While I successfully retrieved the data and all functionalities were working perfectly, I encountered an issue in the Angular console app where I saw this error.

status: 0,
statusText: ‘Unknown Error’,An error occurred while fetching plants: HttpErrorResponse {
headers: _HttpHeaders {
normalizedNames: Map(0) {},
lazyUpdate: null,
headers: Map(0) {}
},
status: 0,
statusText: ‘Unknown Error’,
url: ‘https://localhost:7171/api/’,
ok: false,
name: ‘HttpErrorResponse’,
message: ‘Http failure response for https://localhost:7171/api/: 0 Unknown Error’,
error: ProgressEvent2 {
type: ‘error’,
target: XMLHttpRequest2 {
onloadstart: null,
onprogress: null,
onabort: null,
onerror: null,
onload: null,
ontimeout: null,
onloadend: null,
_listeners: [Object],
onreadystatechange: null,
_anonymous: undefined,
readyState: 4,
response: null,
responseText: ”,
responseType: ‘text’,
responseURL: ”,
status: 0,
statusText: ”,
timeout: 0,
upload: [XMLHttpRequestUpload],
_method: ‘GET’,
_url: [Url],
_sync: false,
_headers: [Object],
_loweredHeaders: [Object],
_mimeOverride: null,
_request: null,
_response: null,
_responseParts: null,
_responseHeaders: null,
_aborting: null,
_error: null,
_loadedBytes: 0,
_totalBytes: 0,
_lengthComputable: false
},
currentTarget: XMLHttpRequest2 {
onloadstart: null,
onprogress: null,
onabort: null,
onerror: null,
onload: null,
ontimeout: null,
onloadend: null,
_listeners: [Object],
onreadystatechange: null,
_anonymous: undefined,
readyState: 4,
response: null,
responseText: ”,
responseType: ‘text’,
responseURL: ”,
status: 0,
statusText: ”,
timeout: 0,
upload: [XMLHttpRequestUpload],
_method: ‘GET’,
_url: [Url],
_sync: false,
_headers: [Object],
_loweredHeaders: [Object],
_mimeOverride: null,
_request: null,
_response: null,
_responseParts: null,
_responseHeaders: null,
_aborting: null,
_error: null,
_loadedBytes: 0,
_totalBytes: 0,
_lengthComputable: false
},
lengthComputable: false,
loaded: 0,
total: 0
}
}

I was completely perplexed because all the configurations seemed correct, including CORS and the API URL. After two days of troubleshooting, I finally realized that I was running the server-side (.NET) as HTTPS. This realization shed light on the issue. Running the server side with HTTPS while accessing it from a non-HTTPS client could indeed cause problems, including triggering CORS issues or causing the browser to block the request due to security restrictions.
When running your server locally with HTTPS, it’s essential to ensure that your Angular application is also configured to use HTTPS, or you’ll encounter security-related issues like the one you experienced.So i runned the server side http and it’s works for me.