web-dev-qa-db-ja.com

IISにAngularおよび.NET Core Web APIをデプロイする方法は?

IISの2つのWebサイトがangular_clientとweb_apiの両方にあり、ホスティングバンドルがインストールされており、IUSR、ネットワーク、ネットワークサービス、Everyoneなどのユーザーへの権限がすでに付与されています。

各サイトへのナビゲーションは個別に機能します。つまり、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 to call 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

サーバー[〜#〜] 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は同じサーバー上にありますが、異なるWebサイトにあります。

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

ありがとうございました

6
TiyebM

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?}");
    });
}

1
RS Gamer
     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();

        }
0
Harkirat singh