If you ever find yourself as disoriented as I was... My troubles were not caused by CORS (I have complete control over the server(s) and CORS settings were correct!).

The root of my problem stemmed from using Android platform level 28 which disables cleartext network communications by default, while attempting to develop an app that connects to my laptop's IP address (where the API server is hosted). The URL for the API base is something like http://[LAPTOP_IP]:8081. Since it's not using https, the Android webview blocked all network traffic between the phone/emulator and the server on my laptop. To resolve this issue:

Implement a network security configuration

Create a new file in the project: resources/android/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- Set application-wide security config -->
  <base-config cleartextTrafficPermitted="true"/>
</network-security-config>

NOTE: Exercise caution when implementing this, as it allows all cleartext traffic from your app (without being forced to use HTTPS). You can add further restrictions if necessary.

Referencing the configuration in the main config.xml file

<platform name="android">
    ...
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
        <application android:networkSecurityConfig="@xml/network_security_config" />
    </edit-config>
    <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
    ....
</platform>

That's all there is to it! After rebuilding the APK, the app could effectively communicate from both the emulator and phone.

For more information on network security: https://developer.android.com/training/articles/security-config.html#CleartextTrafficPermitted

If you're working with a .NET Core application, this solution could be just what you need!

It's important to note that this issue may not necessarily be an Angular or other request error in your front end application.

First off, make sure to include the Microsoft CORS Nuget package:

Install-Package Microsoft.AspNetCore.Cors

Then, add the CORS services in your startup.cs. In your ConfigureServices method, ensure it looks something like this:

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
}

Next, incorporate the CORS middleware into your app. In your startup.cs, within the Configure method, make sure it resembles the following:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
ILoggerFactory loggerFactory)
{
    app.UseCors( options => 
    options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    app.UseMvc();
}

The options lambda employs a fluent API so you can customize it by adding or removing additional options as needed. While you have the option to use “AllowAnyOrigin” to accept any domain, I strongly advise against it as it can leave your app vulnerable to cross origin calls from unauthorized sources. Additionally, you can restrict cross origin calls to specific HTTP methods (e.g., GET/PUT/POST) to control which actions are accessible across domains.

Success! I was able to get it working again by disabling my ad blocker extension in Chrome. It seems like this error pops up occasionally when something is blocking HTTP in the browser.

https://i.sstatic.net/KWM8j.png

I encountered an issue due to a server side JsonSerializerException.

While processing the request, an unhandled exception occurred: Newtonsoft.Json.JsonSerializationException: The type is causing a self referencing loop...

The response from the client was:

POST http://localhost:61495/api/Action net::ERR_INCOMPLETE_CHUNKED_ENCODING
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, ...}

Simplifying the response type by removing the loops resolved the issue.

During my development process on a local server, I encountered this error in Firefox but not Chrome. After investigating, I discovered that the issue stemmed from Firefox not recognizing the SSL certificate of my local API (which is invalid). Although I had added it to my local certificate store, only Chrome trusted it and not Firefox. To resolve this, I accessed the API directly and added an exception in Firefox, which successfully resolved the problem.

If you're encountering issues with CORS in your node service, check out the steps provided here.

The error you're facing is related to Cross-Origin Resource Sharing (CORS). For more details on these types of errors, visit this link.

To resolve this problem, make sure to update your node service with the following code snippet:

let express = require("express");
let app = express();

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");    
    next();
});

The issue arises when a valid client certificate and token that the server can recognize are not provided:

Error:

Http failure response for (unknown url): 0 Unknown Error

Here is an example of code showcasing the problem:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

class MyCls1 {

  constructor(private http: HttpClient) {
  }

  public myFunc(): void {

    let http: HttpClient;

    http.get(
      'https://www.example.com/mypage',
      {
        headers:
          new HttpHeaders(
            {
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest',
              'MyClientCert': '',        // Client Certificate field empty
              'MyToken': ''              // Token field empty
            }
          )
      }
    ).pipe( map(res => res), catchError(err => throwError(err)) );
  }

}

Please note that the error occurred because both the MyClientCert and MyToken fields were left empty. It is important to provide values that your server recognizes for these fields.

Whenever my requests took longer than 2 minutes to complete, I kept receiving a specific message. Despite the browser disconnecting from the request, the backend process continued until it was done. Unfortunately, the server (specifically ASP.NET Web API in my scenario) failed to detect this disconnection.

After an entire day of searching, I stumbled upon this valuable answer, which shed light on the fact that using the proxy configuration entails a default timeout of 120 seconds (or 2 minutes).

Hence, it's possible to customize your proxy configuration based on your requirements:

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "timeout": 6000000
  }
}

During my quest for solutions, I found myself utilizing agentkeepalive to address NTLM authentication challenges. It was only later that I realized the agent's timeout and the proxy's timeout were independent settings and both needed adjustment. Here's an illustrative example:

const Agent = require('agentkeepalive');

module.exports = {
    '/api/': {
        target: 'http://localhost:3000',
        secure: false,
        timeout: 6000000,          // <-- make sure to set this too
        agent: new Agent({
            maxSockets: 100,
            keepAlive: true,
            maxFreeSockets: 10,
            keepAliveMsecs: 100000,
            timeout: 6000000,      // <-- specifically for agentkeepalive
            freeSocketTimeout: 90000
        }),
        onProxyRes: proxyRes => {
            let key = 'www-authenticate';
            proxyRes.headers[key] = proxyRes.headers[key] &&
                proxyRes.headers[key].split(',');
        }
    }
};

My current setup involves ASP.NET SPA Extensions creating a proxy on ports 5000 and 5001 to pass through to Angular's port 4200 during development.

Initially, CORS was properly configured for https port 5001 and everything was running smoothly. However, when I accidentally accessed an old bookmark for port 5000, I encountered an unexpected error message along with a 'preflight' error in the console.

Regardless of your specific environment, it is essential to ensure that all necessary ports are specified when using CORS, as both the host and port play crucial roles in successful communication.

It turned out that the root of my issue was related to my browser, as my requests were functioning properly in Postman.

I discovered that both Firefox and Chrome were blocking requests directed to port 6000. Once I made the switch to port 4000 for my ASP.NET API, the error message transformed into a CORS error that I was able to resolve.

Chrome specifically displayed the error code ERR_UNSAFE_PORT, providing me with valuable insight into where the problem might lie.

To resolve the CROS issue in your Angular or Ionic project while utilizing Laravel as your Backend, you can easily do so by editing your .htaccess file and adding the following code:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

In the case where a correct cors header is in place, it's possible that your corporate network is removing this header. To determine if the issue lies with the network, attempt to access the website from outside of your network. This can help identify whether the network is indeed causing the problem, a step worth taking regardless of the root cause.

Include the following code snippet in your connection file

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT,GET,POST,DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

In the realm of asp.net core, in case your api controller is missing the annotation [AllowAnonymous], it's essential to insert it above your controller title in this manner:

[ApiController]
    [Route("api/")]
    [AllowAnonymous]
    public class TestController : ControllerBase

For those utilizing nodejs as a backend, here are the necessary steps:

1. Begin by installing cors in your backend application:

   npm install cors

2. Next, include this code snippet:

    const cors = require('cors');
    const express = require('express');
    const expressApp = express();
    expressApp.use(cors({
        origin: ['http://localhost:4200'],
        "methods": "GET,PUT,POST",
        "preflightContinue": false,
        "optionsSuccessStatus": 204,
        credentials: true
    }));
   

Dealing with the same problem, I found a solution by incorporating grdl's advice and implementing a cors configuration on my server as shown below.

{
"cors": [
    {
      "origin": [“*”],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
  ]
}

Make sure to refer to your server's specific cors configuration guide for proper setup instructions.

Let's discuss some straightforward scenarios:

a) When the network disconnects, a zero byte response is received.

b) Cancelling an HTTP call can result in this outcome (surprisingly).

c) During startup, moving pages too quickly can lead to canceled HTTP calls due to Angular not being properly connected. I had to lock the page to prevent this from happening.

d) With a proxy in between, the connection may be terminated after 30 seconds without sending a HTTP timeout packet. Checking the .NET logs on the backend will reveal a "client disconnected" message. This occurrence is common as users may simply close their browsers without warning.

All of these issues have occurred for me, and determining the exact cause of a specific failure can be challenging.

In my scenario, I encountered a situation where UseCors was positioned after the UseAuthentication / Authorization middleware: Encountering 'No 'Access-Control-Allow-Origin' Header' Error in Response

Although it may not be as long-standing as some other queries, I recently encountered this issue in an Ionic-Laravel application. Despite trying various solutions found here and on other forums without success, I eventually resorted to installing the barryvdh/laravel-cors package in Laravel. Surprisingly, this addition resolved the problem effectively.

The issue I faced stemmed from an improper relationship setup within the models I was attempting to access. Through careful debugging, I pinpointed that it ultimately crashed due to a faulty relation.

It turned out the issue wasn't related to Angular. Instead, it was due to a DateTime field in the database having a value of (0000-00-00), which my model couldn't bind correctly. I resolved the problem by changing the value to a valid date like (2019-08-12).

My current setup includes .NET Core, OData v4, and MySql using the EF Pomelo connector.

Always remember to include the --port parameter when starting the server ng serve --open --port 4200

    export class DatabaseService {
  baseUrl: String = "http://localhost:8080/";
  constructor(private http: HttpClient) { }


  saveTutorial(response) {
    var fullUrl = this.baseUrl + "api/tutorials";
   
    return this.http.post(fullUrl,response);
  }
}

2022-07-13

This method is the most simple, but be cautious when dealing with production environments.

To resolve CORS issues blocking access to a local IIS Express server at https://localhost:44387/api/test, you can modify or add the following line inside the index.html file:

<meta http-equiv="Content-Security-Policy" content="
...
connect-src 'self' https://localhost:44387 https://anysite.com ...">

Encountering the same issue while trying to connect my Angular frontend with Django REST API backend led me to discover a simple solution. The culprit turned out to be the absence of CORS headers installation. To rectify this, you can:

1. Begin by installing django-cors-headers. You can achieve this using pip:

   pip install django-cors-headers

2. Add cors-headers to your installed apps in /settings.py file:

INSTALLED_APPS = [ 'rest_framework', 'corsheaders' ]

3. In any section of your code, include the following line:

   CORS_ALLOW_ALL_ORIGINS =True

Adopting these steps resolved the issue on my end. Hopefully, it proves beneficial for you as well.

Keep coding and enjoy development!

According to some other contributors, the issue often arises when the browser blocks the outgoing request for unknown reasons, with CORS being a common culprit. However, in my particular case, the problem stemmed from Chrome (as well as other Chromium-based browsers) preventing the upload of a file stored on Google Drive. This was due to Chrome mistakenly detecting that the file had been altered between the time it was selected on the user's device and when the form containing the file was submitted. The error message displayed in the console is "net::err_upload_file_changed." To resolve this, a workaround involves copying the file content into a buffer, as detailed here: Attached from google drive(cloud storage) in android File gives: err_upload_file_changed error

Before anything else, it's a good idea to test in Postman and see if the error persists.

If it does, one possible reason could be using http instead of https. This was the mistake I made that caused the issue for me.

For example:

http://localhost:7269/api/categories (Previously, resulting in an error)

https://localhost:7269/api/categories (Now corrected)