如何在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.xy，然后告诉angular调用http：//10.1.xy：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

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

1. Angular在10.xyz：4200，

2. API 10.xyz：51975，

问题是，当我尝试使用公共IP或我的主机名时，我仍然只能访问角度而不是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

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配置对此没有帮助。

以下是有关CORS的Angular文档的链接，以及Microsoft文档如何在详细描述的情况下启用CORS 。

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

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

        }