In ASP.NET core – not adding a CORS middleware is causing a “Failed to load resource: net::ERR_CONNECTION_REFUSED” error


The question is asked by running two simple experiments. The observation from these experiments are a bit puzzling to understand. Could someone please help me make sense out of it?

Experiment 1:

  • Create a simple asp.net core api application with one end point https://localhost:5001/hello
  • Create a html page, that hits the end point on load
  • Run the asp.net core application
  • Open the html page in a browser and observer the console

Observation 1:

  • The empty html page loads
  • There is an error in the console saying “Failed to load resource: net::ERR_CONNECTION_REFUSED”
  • While checking the network tab of the browser, the GET call has failed.
  • There has been no OPTIONS call

Experiment 2:

  • Modify the asp.net core application to add a any origin cors policy
  • Use the cors policy
  • Run the asp.net core application
  • Open the html page in a browser and observer the console

Observation 2:

  • The empty html page loads
  • There is NO error in the console saying “Failed to load resource: net::ERR_CONNECTION_REFUSED”. The page is successfully able to access the resource from asp.net core application
  • While checking the network tab of the browser, the GET call has succeeded.
  • There has been no OPTIONS call

Doubt

  1. Why is adding CORS affecting this behavior. As per the CORS specification, simple get is not affected by CORS.
  2. Even if CORS is supposed to affect this. The behavior is not as per the CORS specification. There has been no OPTIONS call. The call that’s failing is GET

asp.net core code

HelloController.cs

    (ApiController)
    (Route("(controller)"))
    public class HelloController : ControllerBase
    {
        (HttpGet)
        public string Hello()
        {
            return "hello";
        }
    }

StartUp.cs

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();

            //********************************************
            //Enabled for the second experiment
            services.AddCors(c =>
            {
                c.AddPolicy("AllowOrigin", options => options.AllowAnyOrigin());
            });
            //********************************************
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseHttpsRedirection();

            app.UseRouting();

            //***************************************
            //Enable for the second experiment
            app.UseCors("AllowOrigin");
            //****************************************

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
    }

HTML Code page.html

<html>
  <body onload="updateDB();">
  </body>
  <script language="javascript">
    function updateDB() {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "https://localhost:5001/hello", true);
      xhr.send(null);
    }
  </script>
</html>