我在我的角度网络应用程序中刷新时遇到问题

Question

我在使用 Angular 作为前端、使用 ASP.NET Core 作为后端开发并部署在 azure 中的 Web 应用程序中遇到问题。每当我按下页面上的“更新”按钮或 F5 时，无论我在哪里，我都会收到此 404 错误：“404 - 未找到文件或目录。 您正在查找的资源可能已被删除、更名或暂时不可用。”

任何帮助或指导将不胜感激。谢谢！

我找不到任何方法来解决这个问题。

Answer 1

确保 Angular 应用程序中存在正确的 URL 配置，并验证 Azure 应用服务部署以确保存在所有必需的文件。

如果使用 Angular 路由，请确保正确定义路由。检查 Angular 路由配置以确保其与应用程序的结构保持一致。

使用 ASP.NET Core Web API .NET 7 作为后端并使用 Angular 17 作为前端创建了示例应用程序。

在我的 Program.cs 中，我添加了前端 URL，如下所示。

节目：

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.AddCors(c => {
    c.AddPolicy("https://<FrontEndAzureWebAppName>.azurewebsites.net", options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
});
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseSwagger();
app.UseSwaggerUI(x =>
{
    x.SwaggerEndpoint("/swagger/v1/swagger.json", "Web API V1");
    if (app.Environment.IsDevelopment())
        x.RoutePrefix = "swagger";
    else
        x.RoutePrefix = string.Empty;
}
);
app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.MapFallbackToFile("/index.html");
app.Run();

在我的weather.service.ts中，我添加了后端URL，如下所示。

我的天气.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { WeatherForecast } from './weather-forecast.model';
@Injectable({
  providedIn: 'root'
})
export class WeatherService {
  private apiUrl = 'https://<BackendApiWebAppName>.azurewebsites.net/WeatherForecast';
  constructor(private http: HttpClient) { }
  getWeatherForecast(): Observable<WeatherForecast[]> {
    return this.http.get<WeatherForecast[]>(this.apiUrl); 
  }
}

本地前端输出:

我成功将后端发布到Azure App Service，如下所示。

然后通过VS Code发布前端，如下图。

Azure 应用服务后端输出：

刷新页面后，加载成功，没有任何问题。

Azure 应用服务前端输出：