CODEWITHSUNDEEP
angularasp.net-coreiis
Henning
Henning

Reputation: 491

Angular + .NET Core ERR_CONNECTION_REFUSED from remote

I have a .NET Core backend, an Angular frontend and a NGNIX as reverse proxy. I run the system under Windows 10, where I published the backend with FolderProfile, copied it to the PC and start it via the exe. The webserver for the frontend is an IIS. I start NGNIX via the command line.

If I call the frontend in the browser on the local PC everything works correctly. I can successfully access and work with the page via HTTP://localhost:4200, the correct URL as HTTP://test.example.net:4200 and HTTPS://test.example.net.

If I now call the page from a remote PC I get "Failed to load resource: net::ERR_CONNECTION_REFUSED" in the browser console. The Angular page is displayed, but the communication to the backend does not seem to work. It doesn't matter if I use HTTP://test.example.net:4200 or HTTPS://test.example.net. The ports (443, 4200, 5000) in the firewall are open.

In the backend I made the following adjustments:

virtual public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy(name: MyAllowSpecificOrigins,
                            builder =>
                            {
                                builder.AllowAnyOrigin();
                                builder.AllowAnyHeader();
                                builder.AllowAnyMethod();
                            });
    });
    
    services.AddMvc().SetCompatibilityVersion(...);
    ...
}

virtual public void Configure(IApplicationBuilder app, IHostEnvironment env)
{
    ...
    app.UseCors(MyAllowSpecificOrigins);
    app.UseHttpsRedirection();
    
    app.UseAuthentication();

    app.UseMvc();
    ...
}

Here is the web.config from the frontend:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Headers" value="*" />
      <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS,PUT,DELETE" />
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Credentials" value="true" />    
    </customHeaders>
  </httpProtocol>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

Here is the nginx.conf:

worker_processes  1;

events { 
}

http {

  map $http_upgrade $connection_upgrade {
      default upgrade;
      ''      close;
    }
    
  upstream test.example.net {
    server 127.0.0.1:4200;
    #server test.example.net:4200;
    #server test.example.net;
  }
   
  server {
    listen 443 ssl; 
    
    server_name test.example.net;
    keepalive_timeout   70;
    
    ssl_certificate C:\\nginx-1.18.0\\conf\\certs\\cert.crt;
    ssl_certificate_key C:\\nginx-1.18.0\\conf\\certs\\cert.key;
    
    ssl_prefer_server_ciphers on;
    ssl_session_timeout 10m;
    ssl_session_cache shared:SSL:10m;
    ssl_session_tickets off;

    # intermediate configuration. tweak to your needs.
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:ECDHE-RSA-DES-CBC3-SHA:ECDHE-ECDSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';

    
    location / {
        proxy_pass http://test.example.net;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
    }
  }
}

The browser on the remote PC shows the following:

enter image description here

I hope someone has an idea where the problem is

Upvotes: 1

Views: 6600

Answers (2)

Robin
Robin

Reputation: 521

Based on Abrahams answer, for me in an Angular + .NET5 application it worked by setting the api URL in the environment.prod.ts as:

export const environment = { production: true, apiUrl: '/api', ... }

And the having the launchSettings.json like:

"api": { "commandName": "Project", "dotnetRunMessages": "true", "launchBrowser": false, "launchUrl": "swagger", "applicationUrl": "http://localhost:5000", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" }

Upvotes: 0

Abraham Qian
Abraham Qian

Reputation: 7522

From the error displayed in the browser, the client application is unable to connect the backend web server.
We need to change the App’s URL to the actual URL address instead of the localhost. try to change the URLs inside the angular application to point to the actual domain name instead of localhost:4200, as well the configuration in IIS.
https://support.aspnetzero.com/QA/Questions/6395/Failed-to-load-resource-netERRCONNECTIONREFUSED
Feel free to let me know if the problem persists.

Upvotes: 2

Related Questions