How To Deploy Angular And .NET Core Web API On IIS?

Question

We have two web sites on IIS for both angular_client and web_api, the hosting bundle is installed and the permission to users such as IUSR, Network, Network Service and Everyone, is already granted.

The navigation to each site seperately works, i.e in the API, the call http://localhost:51975/api/user, results in list of all users.

The problem is that Angular login page fails to communicate with the API to authenticate users:

OPTIONS http://localhost:51975/api/user/authenticate net::ERR_CONNECTION_REFUSED

I tried to modify the IP associated with the API to a static one, i.e 10.1.x.y and then tell angular to call http://10.1.x.y:51975/api/user/authenticate instead.

In the API I enabled sending the log to browser and also to logs folder, the only log it shows is:

Hosting environment: Production
Content root path: C:\inetpub\wwwroot\api
Now listening on: http://127.0.0.1:39834
Application started. Press Ctrl+C to shut down.
Application is shutting down...

Why it is listening on other port rather than the associated one 51975?

Why the connection is refused from the Angular to the API?

Why the application is shutting down?

Is this the right approach to do this?

UPDATE 1

On the server ONLY, the application works fine, with the following configurations:

1. Angular is on 10.x.y.z:4200,

2. API 10.x.y.z:51975,

The problem is that when I try to use the public ip or my host name, I still can access only the angular but not the Web API, I tried to assigne the host name for the api, and it is not working yet!

UPDATE 2

I have also allowed both of the ports 4200 and 51975 on my host name domain.

UPDATE 3

I am hosting the Web API on IIS, both API and Angular are on the same server but diferent websites.

I removed the statement about CORS fixed, because I still have a warning on the browser console, here is the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://{public IP}:51975/api/user/authenticate. (Reason: CORS request did not succeed).[Learn More]

Object { headers: {…}, status: 0, statusText: "Unknown Error", url: "http://{public IP}:51975/api/user/authenticate", ok: false, name: "HttpErrorResponse", 
 message: "Http failure response for http://{public IP}:51975/api/user/authenticate: 0 Unknown Error", error: error }


OPTIONS Http failure response for http://{public IP}:51975/api/user/authenticate net::ERR_CONNECTION_TIMED_OUT

About CORS, here is my configuration, it works fine locally:

 //In ConfigureServices method
 services.AddCors();

 //In Configure method
 app.UseCors(options => options.WithOrigins("http://localhost:4200/").AllowAnyMethod().AllowAnyHeader());

Thank you

Answer 1

The CORS error explains everything you need to know. You need to configure CORS also for the public IP and DNS if you use also access by DNS name. It has to be configured for the exact same URL you use to access the Angular application.

app.UseCors(options => 
   options.WithOrigins(
      "http://localhost:4200/",
      "http://{public IP}:{public port}/",
      "http://{public DNS name}:{public port}/"
   ).AllowAnyMethod().AllowAnyHeader());

You need only CORS settings for the Angular client addresses because the Angular application needs to obtain permission to make CORS requests to your Web API. It calls from the public address so the localhost configuration does not help this just helps when you access it locally with localhost.

Here are links to the Angular documentation about CORS and the Microsoft documentation how to enable CORS where it is described in detail.

Answer 2

Make sure you have created proper headers in your api request from Angular project.

like:

createHeader() {
let reqheaders = new HttpHeaders();
reqheaders.append('Access-Control-Allow-Methods', 'GET, POST, DELETE, PUT');
reqheaders.append('Access-Control-Allow-Origin', '*');

let reqHeader = { headers: reqheaders };
return reqHeader;
}

On .net core side:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseCors(b => b.WithOrigins("http://localhost:8033", "http://localhost:8034","*").AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
    // app.UseCors("corspolicy");
    //app.UseSignalR(routes =>
    //{
    //    routes.MapHub<RealTimeHub>("/api/chat");
    //});
    app.UseMvc(routes =>
    {
        routes.MapRoute("default", "{controller=Home}/{action=Index}/{id?}");
    });
}

Answer 3

     services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
            builder => builder.WithOrigins("localhost").AllowAnyOrigin()
                              .AllowAnyMethod()
                              .AllowAnyHeader()
                              .AllowCredentials());
            });
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            app.UseCors("CorsPolicy");
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseMvc();

            app.UseAuthentication();

        }