angular 6 dotnet core 2.1

Angular 6 + .NET Core 2.1 Web API = Komunikacja

Wstęp

Aby skomunikować ze sobą dwie niezależne na początku aplikacje należy wykonać następujące czynności:
1. W aplikacji Angular odpowiednio skonfigurować proxy
2. W aplikacji .NET Core Web API skonfigurować tzw. CORS

1. Konfiguracja proxy w Angularze

Żeby prawidłowo skonfigurować proxy należy znać adres, pod którym dostępna jest aplikacja .NET Core.

Aby to sprawdzić wystarczy ją wystartować. W tym celu w folderze głównym aplikacji .NET Core (tam, gdzie znajduje się plik csproj) uruchamiamy konsolę PowerShell (Shift + PPM -> Otwórz tutaj okno programu PowerShell). wpisujemy dotnet run i sprawdzamy na jakich portach nasłuchuje połączeń. Domyślnie jest to 5000 dla HTTP i 5001 dla HTTPS.

dotnet-run

Kolejnym krokiem jest utworzenie pliku proxy.conf.json w folderze głównym aplikacji Angular. W pliku należy wpisać poniższą konfigurację:

{
  "/api/*": {
  "target": "https://localhost:5001",
  "secure": true,
  "logLevel": "debug",
  "changeOrigin": true
  }
}

Definiuje ona przekierowania dla requestów do /api/

W moim przypadku wszystkie: http://localhost:4200/api/ -> https://localhost:5001/api/

angular-proxy-config

Ostatnim krokiem przy konfiguracji proxy jest jej włączenie w momencie startu aplikacji. Aby tego dokonać należy w pliku package.json w lini zawierającej npm start zmienić komendę ng serve na ng serve –proxy-config proxy.conf.json

angular-proxy

2. Konfiguracja CORS w .NET Core

Cross-Origin Resource Sharing jest mechanizmem umożliwiającym komunikację z backendem tylko wybranym aplikacjom. Do działania wykorzystuje nagłówki HTTP, a więcej informacji dostępnych jest pod linkiem: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Konfiguracja odbywa się w pliku Startup.cs aplikacji .NET Core i polega na dodaniu w metodzie ConfigureServices tej reguły CORS:

services.AddCors(options =>
{
    options.AddPolicy("MyCorsPolicy",
        builder =>
        {
            builder.AllowAnyOrigin().AllowAnyHeader();
            builder.AllowAnyOrigin().AllowAnyMethod();
        });
});

A następnie w metodzie Configure włączenie jej:

app.UseCors("MyCorsPolicy");

dotnet-core-cors

Podsumowanie

Warto zauważyć, że dodana reguła pozwala łączyć się z backendem z każdej aplikacji. W warunkach produkcyjnych reguła powinna być bardziej restrykcyjna.

Aplikacja z przykładu + instrukcja uruchomienia jest dostępna jest w publicznym repozytorium:
https://github.com/MattKoboski/dotnetcorelovesangular