Angular + .NET Core ERR_CONNECTION_REFUSED 来自远程答案

【问题标题】：Angular + .NET Core ERR_CONNECTION_REFUSED from remoteAngular + .NET Core ERR_CONNECTION_REFUSED 来自远程
【发布时间】：2020-12-08 16:28:25
【问题描述】：

我有一个 .NET Core 后端、一个 Angular 前端和一个 NGNIX 作为反向代理。我在 Windows 10 下运行系统，我在其中使用 FolderProfile 发布了后端，将其复制到 PC 并通过 exe 启动它。前端的网络服务器是一个 IIS。我通过命令行启动 NGNIX。

如果我在本地 PC 上的浏览器中调用前端，一切正常。我可以通过 HTTP://localhost:4200 成功访问和使用该页面，正确的 URL 为 HTTP://test.example.net:4200 和 HTTPS://test.example.net。

如果我现在从远程 PC 调用该页面，我会在浏览器控制台中看到“加载资源失败：net::ERR_CONNECTION_REFUSED”。显示 Angular 页面，但与后端的通信似乎不起作用。我使用 HTTP://test.example.net:4200 还是 HTTPS://test.example.net 都没有关系。防火墙中的端口（443、4200、5000）是开放的。

在后台我做了以下调整：

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();
    ...
}

这是来自前端的 web.config：

<?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>

这里是 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;
    }
  }
}

远程PC上的浏览器显示如下：

希望有人知道问题出在哪里

【问题讨论】：

使用外部接口时，与后端的连接似乎存在问题。所以我建议你检查 NGINX 和 IIS 的配置。检查 NGINX 配置文件中的 listen 指令，确保它不会限制到 localhost 的连接。
@NikitaK 我添加了 nginx.conf。 Listen 仅包含：listen 443 ssl;

标签： angular asp.net-core iis

【解决方案1】：

从浏览器中显示的错误来看，客户端应用程序无法连接后端 Web 服务器。
我们需要将 App 的 URL 更改为实际的 URL 地址，而不是 localhost。尝试将 Angular 应用程序中的 URL 更改为指向实际域名而不是 localhost:4200，以及 IIS 中的配置。
https://support.aspnetzero.com/QA/Questions/6395/Failed-to-load-resource-netERRCONNECTIONREFUSED
如果问题仍然存在，请随时告诉我。

【讨论】：

【解决方案2】：

根据 Abrahams 的回答，对我来说，在 Angular + .NET5 应用程序中，它通过将 environment.prod.ts 中的 api URL 设置为：

导出常量环境 = { 生产：真实， apiUrl: '/api', ... }

还有 launchSettings.json 之类的：

“API”：{ "commandName": "项目", “dotnetRunMessages”：“真”， “启动浏览器”：假， "launchUrl": "招摇", "applicationUrl": "http://localhost:5000", “环境变量”： { "ASPNETCORE_ENVIRONMENT": "发展" }

【讨论】：