skip to Main Content

I create an Angular App which works great on my development machine.
Now, I am trying to install it on a Windows production server.
For this I have install apache in order to serve this App and also the Rest Service API that goes with.
If I open a web browser and the server and use my Angular App through public IP (https), it works well.
If I do the same from another machine, I can reach the first login page but when I want to login I get the following error message:
-> OPTIONS http://localhost:5001/users/authenticate net::ERR_EMPTY_RESPONSE

I try to configure the Firewall but that doesn’t help, I read many topic but can’t find any answer.

The rest API is done in C#, the startup Configure function looks like this:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();

            Console.WriteLine("Hello Welcome to WebAPI service");

            // global cors policy
            app.UseCors(x => x
                .AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                //.WithOrigins( "http://localhost:80" )
                //.SetIsOriginAllowed( isOriginAllowed: _ => true )
                .AllowCredentials());

            app.UseAuthentication();

            app.UseMvc();
        }

The call to the API from Angular App looks like this:

return this.http.post<any>(`${this.env.apiUrl}/users/authenticate`, { username, password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                    this.currentUserSubject.next(user);
                }

                return user;
            }));

The env.js file :

(function (window) {
    window.__env = window.__env || {};

    // API url
    window.__env.apiUrl = 'http://localhost:5001';

    // Whether or not to enable debug mode
    // Setting this to false will disable console output
    //window.__env.enableDebug = true;
  }(this));

2

Answers


  1. Can we see your environment file ?
    My guess would be that you need your env.apiUrl variable to be set to your public domain name or IP and not to localhost which is apparently the case.

    API Requests are called from your client and not from the server. So when a user access to your website he will be calling your API, located to your server, from his computer. That’s why you need to set env.apiUrl to the domain or IP address of your server with the correct port.

    Login or Signup to reply.
  2. Your Angular App is running client-side. So you cannot call your API through localhost since the client will not have a backend running locally.

    It was working when you were developing your application because your backend was running on your computer. It is also working on your server because, as I understand, your backend and your Angluar App are on the same server.

    First think to do is to test your API is correctly configured on you server so run it with postman from your local computer to check it can be access.

    If it is working, you have to set your env.apiUrl to the public IP address of the server and with the right port number.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search