404 «Извлечь данные» в шаблонном приложении .net core spa при использовании прокси-сервера разработки

Question

Я создал угловой проект, используя .NET core 2.2 и шаблон spa.

Я изменил startup.cs для использования прокси-сервера разработки при обслуживании angular, чтобы я мог запускать свой сервер и мой клиентский код независимо.

Я использую документацию .net core 2.2 и этот пост в блоге в качестве ссылки:

https://www.codingflow.net/building-single-page-applications-on-asp-net-core-2-2/

app.UseSpa(spa =>
        {
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                //spa.UseAngularCliServer(npmScript: "start");
                spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
            }
        });

Затем я выполнил следующие команды в двух терминалах

dotnet run

_

cd ./ClientApp\
npm start

Когда я перехожу в своем браузере (chrome) на localhost: 4200, веб-пакет будет обслуживать мое приложение.Однако, когда я перехожу на страницу выборки данных из шаблона, вызов API для

http://localhost:4200/api/SampleData/WeatherForecasts

сделан в компоненте выборки данных, являющейся частью стандартного шаблона

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})
    export class FetchDataComponent {
  public forecasts: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
  this.forecasts = result;
}, error => console.error(error));
  }
}

interface WeatherForecast {
  dateFormatted: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

Возвращает 404

GET http://localhost:4200/api/SampleData/WeatherForecasts 404 (Not Found)
HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/SampleData/WeatherForecasts", ok: false, …}

Конечно, эта ошибка не выдается, если я запускаю IIS Express в режиме отладки из Visual Studio.Это запустит окно браузера на другом порту (не 4200, обычно 44333), где все запросы API, кажется, нормально маршрутизируются.

Я бы хотел иметь возможность управлять своим клиентским кодом независимо от кода моего сервера.Как я могу это сделать?Что не так с моей текущей настройкой?

Answer 1

Спасибо, Тао Чжоу за ваш ответ.Для моего проекта разрешение на запрос из любого источника не было вариантом, поэтому мне пришлось искать другой ответ.

Angular запускается по умолчанию на порту 4200. Я создал файл proxy.conf.json и добавил его в тот же каталог, что и мой package.json

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

}

Затем я изменяю свой стартовый скрипт npm в package.json следующим образом:

"scripts": {
    "ng": "ng",
    "start": "npm run ng -- serve --proxy-config proxy.conf.json",

Это дает команду веб-пакету проксировать все маршруты, начиная с / api, до порта 5001. Это соглашение .NET core для всехмаршруты, которые не служат представлению, и идеально подходят для моего проекта.

Это также позволяет нам сохранять строгий контроль над заголовком и источником по соображениям безопасности.

Answer 2

При разделении проекта SPA на Front-End и Back-End необходимо изменить baseUrl в угловом направлении.

Для dotnet run будет запущен основной проект .net с именами https://localhost:5001 и http://localhost:5000.

Для npm start будет запущен угловой проект под http://localhost:4200.

Для @Inject('BASE_URL') baseUrl: string он вернет угловой URL вместо основного URL-адреса.

Итак, вам нужно изменить базовый URL-адрес запроса, и вы можете попытаться сделать следующее:

export class FetchDataComponent {
public forecasts: WeatherForecast[];
private apiUrl: string = "https://localhost:5001/";
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>(this.apiUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
    this.forecasts = result;
    }, error => console.error(error));
}
}

Поскольку проекты Angualr и Core работают под разными портами, вам необходимо включить Cors вОсновной проект вроде

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    //rest code
    app.UseCors(builder =>
    {
        builder.AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowCredentials();
    });
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller}/{action=Index}/{id?}");
    });

    app.UseSpa(spa =>
    {
        // To learn more about options for serving an Angular SPA from ASP.NET Core,
        // see https://go.microsoft.com/fwlink/?linkid=864501

        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            //spa.UseAngularCliServer(npmScript: "start");
            spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
        }
    });
}