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

Question

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

Я создал угловой проект с использованием.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

Сделано в компоненте fetch-data, части стандартного шаблона

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, кажется, нормально маршрутизируются.

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

2

c# angular asp.net-core spa-template

Источник

user3538411 12 фев '19 в 19:39

3 ответа

Другие вопросы по тегам c# angular asp.net-core spa-template

user6265620 13 фев '19 в 06:27 2019-02-13 06:27 · Answer 1 · 2019-02-13 06:27

При разделении проекта 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 вместо основного api 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");
        }
    });
}

user3538411 13 фев '19 в 19:55 2019-02-13 19:55 · Answer 2 · 2019-02-13 19:55

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

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 для всех маршрутов, которые не обслуживают представление, и идеально подходит для моего проекта.

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

user6896122 18 сен '23 в 21:13 2023-09-18 21:13 · Answer 3 · 2023-09-18 21:13

В моем случае это помогло:

      const PROXY_CONFIG = [
  {
    context: [
      "/api/" // add this line
    ],
    target: target,
    secure: false
  }
]

0

Источник

user6896122 18 сен '23 в 21:13