0

I am building my first web site (total newbie) using Angular and ASP.NET Web API. I can access my web app on localhost 4200 and using 192.168.100.2:4200 on my PC browser.

But when I try to log on the same localhost with a Mobile Phone Android Browser, it returns a server error.

Following are the commands I tried:

ng serve --host 192.168.100.2
ng serve --host 192.168.100.2 --disable-host-check
ng serve --host 0.0.0.0

This is my Login method on the Component

  login(){
    if(this.loginForm.valid){
      const record = this.loginForm.getRawValue();
      console.log(record);
      
      this.authService.login({
        username: record.userName,
        password: record.password,
      }).subscribe({
        next:(data: any) => {
                    this.authService.authToken = JSON.parse(data).token;
          console.log("Orig Token: ", data);
          console.log("Parsed Token: ", this.authService.authToken);
          console.log("Parsed Token (Subject): ", this.authService.authToken.split('.')[1]);
          console.log("JSON (after atob) ",this.authService.atob);
          console.log("Object (Payload): ",this.authService.payLoad);
          console.log("User id: ",this.authService.userID);
          console.log("Name: ",this.authService.userName);
          console.log("Modules: ",this.authService.accessibleModulesOfUser);

          this.router.navigateByUrl('');
          this.toastr.success("Welcome Back.")
        },
        error: (e) => {

                    if (e.status == 0) {
                        // this.msgs.push({ severity: 'warn', detail: 'Server is not available. Please try again later.' });
            // this.toastr.error("Server is not available. Please try again later")
            this.toastr.error("Server is not available. Please try again later")
                    }
                    else if (e.status == ApiCallStatusCodes.UNAUTHORIZED) {
                        // this.msgs.push({ severity: 'error', detail: err.error });
            // console.log(e);
            this.toastr.error(e.error)
                    }
                    else {
                        // this.msgs.push({ severity: 'warn', detail: err.error });
            // console.log(e);
            this.toastr.error(e.error)
                    }
        }
      })
    }
    else{
      this.toastr.warning("Enter username and password.")
    }
  }

I already try adding Inbound Rule to my Windows Defender Firewal but it doesnt work.

enter image description here

Also, I modify the CORS in startup of ASP.NET but still has no luck.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseSwagger();
        app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "WebAPIv5 v1"));
    }

    app.UseHttpsRedirection();

    app.UseRouting();

    app.UseCors(policy => policy.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://localhost:4200", "http://192.168.100.2:4200"));

    app.UseAuthentication();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}
8
  • Usually you don't even need to specify a new firewall rule, if you have your network marked as your home network (instead of marking it as a public network). If this has been done, maybe you can check how you run your serve command. You can try serving it as ng serve --host 0.0.0.0 (as seen here stackoverflow.com/questions/43492354/…) Nov 21, 2022 at 9:12
  • I already tried this command but still doesnt work.
    – Eugene
    Nov 21, 2022 at 9:22
  • 192.168.x.x addresses are not routed on the Internet, so you don't need to obfuscate or censor them.
    – Dai
    Nov 21, 2022 at 9:29
  • "But when I try to log on the same localhost with a Mobile Browser, It returns a server error." - what is the error message, exactly? If you really are getting a "server error" then your networking is working fine, you just need to fix a bug in your code somewhere.
    – Dai
    Nov 21, 2022 at 9:30
  • app.UseHttpsRedirection(); <-- This is probably it: your phone likely won't let you connect to a https:// webserver that's using a self-signed certificate.
    – Dai
    Nov 21, 2022 at 9:32

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.