Web API on IIS says Connection Refused

Question

I am working on a project which has 2 aspects: Web UI (Angular 5) and Web API (.NET Core 2.0) for backend database I am using MySql Engine.

I have hosted the Web UI as well as the Web API on the same VM machine on different ports. Angular Website is running on the default port 80 and API is hosted on the port number 8000.

I am able to load the website home page properly on the network. But when my website make a call to the API on PORT 8000. It is throwing Connection refused error in chrome console. eg: net::ERR_CONNECTION_REFUSED

My website is using the an SSL certificate but my API is not. I have configured the API URL as localhost:8000 only in my angular website.

In my API startup.cs, i have configurations as follows:

public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            services.AddCors(options =>
            {
                options.AddPolicy("AllowAllOrigins",
                    builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader().AllowCredentials());
            });

            services.Configure<MvcOptions>(options =>
            {
                options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAllOrigins"));
            });
      }

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

            env.ConfigureNLog("nlog.config");
            app.UseCors("AllowAllOrigins");
            app.UseMvc();
            loggerFactory.AddNLog();
       }

My web Application is working fine in my local environment. But when i am hosting it on the VM, it is not connecting to my API.

I get below error:

core.js:3121 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
zone.js:2969 OPTIONS http://localhost:8000/api/authentication net::ERR_CONNECTION_REFUSED
scheduleTask @ zone.js:2969
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:3001
proto.(anonymous function) @ zone.js:1394
(anonymous) @ http.js:1629
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
(anonymous) @ subscribeTo.js:21
subscribeToResult @ subscribeToResult.js:11
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:74
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:68
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:51
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
(anonymous) @ scalar.js:5
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:29
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../src/app/login/login.component.ts.LoginComponent.onSubmit @ login.component.ts:53
(anonymous) @ LoginComponent.html:13
handleEvent @ core.js:10251
callWithDebugContext @ core.js:11344
debugHandleEvent @ core.js:11047
dispatchEvent @ core.js:7710
(anonymous) @ core.js:9190
schedulerFn @ core.js:3563
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535
push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.onSubmit @ forms.js:4560
(anonymous) @ LoginComponent.html:13
handleEvent @ core.js:10251
callWithDebugContext @ core.js:11344
debugHandleEvent @ core.js:11047
dispatchEvent @ core.js:7710
(anonymous) @ core.js:8154
(anonymous) @ platform-browser.js:988
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
core.js:1673 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

Please help me with your suggestions.

Thanks

Answer 1

After some more thorough searches. I found out that there can be only 2 problems:

1. Port 8000 is blocked
2. The application is not listening on the Port 8000.

For me it was 1st case.