如何在 IIS 上部署 Angular 和 .NET Core Web API？

Question

我们在 IIS 上为 angular_client 和 web_api 提供了两个网站，托管包已安装，并且已授予用户权限，如 IUSR、网络、网络服务和每个人。

到每个站点的导航单独起作用，即在 API 中，调用 http://localhost:51975/api/user 会生成所有用户的列表。

问题是 Angular 登录页面无法与 API 通信以验证用户：

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

我尝试将与 API 关联的 IP 修改为静态 IP，即 10.1.x.y，然后告诉 angular 改为调用 http://10.1.x.y:51975/api/user/authenticate。

在我启用将日志发送到浏览器和日志文件夹的 API 中，它显示的唯一日志是：

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

为什么它在侦听其他端口而不是关联的一个 51975？

为什么拒绝从 Angular 到 API 的连接？

为什么应用程序会关闭？

这是正确的做法吗？

更新 1

在服务器 ONLY 上，应用程序工作正常，具有以下配置：

1. Angular 在 10.x.y.z:4200，

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

问题是当我尝试使用公共 ip 或我的主机名时，我仍然只能访问 angular 而不能访问 Web API，我试图为 api 分配主机名，但它还没有工作！

更新 2

我还允许我的主机名域上的端口 4200 和 51975。

更新 3

我在 IIS 上托管 Web API，API 和 Angular 都在同一台服务器上，但在不同的网站上。

我删除了关于 CORS 已修复的声明，因为我在浏览器控制台上仍然有警告，这里是错误：

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

关于CORS，这是我的配置，在本地运行良好：

 //In ConfigureServices method
 services.AddCors();

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

谢谢

Answer 1

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

        }

Answer 2

确保您在来自 Angular 项目的 api 请求中创建了正确的标头。

喜欢：

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;
}

.net 核心方面：

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

CORS 错误解释了您需要知道的一切。如果您还使用通过 DNS 名称访问，则还需要为公共 IP 和 DNS 配置 CORS。它必须配置为与您用于访问 Angular 应用程序完全相同的 URL。

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

您只需要对 Angular 客户端地址进行 CORS 设置，因为 Angular 应用程序需要获得向您的 Web API 发出 CORS 请求的权限。它从公共地址调用，因此localhost 配置无济于事，仅当您使用 localhost 在本地访问它时才有帮助。

这里是指向Angular documentation about CORS 和Microsoft documentation how to enable CORS 的链接，其中对其进行了详细描述。