ASP.NET/Angular/Azure: Why does refreshing the page still retrieves old data? The api returns correct data & I've set "no-cache"

To give context, I am using Azure Static Web App linked to GitHub, Azure Container App linked to Docker Hub & have Azure SQL database along with SQL Server setup. This is my first attempt in creating an ASP.NET with Angular.

Following the flow of the process when I refresh the page after deleting:

For the frontend Angular side, I've added a log to my service.ts, it returns the correct API URL. The API URL also has the correct updated content in JSON format. I've also checked the database and it has been updated.

app.ts:

constructor(private taskService: TaskService) {
    console.log('TRACE 1: Component initialized. Starting loadTasks().');
    this.loadTasks();
}

task.service.ts:

getTasks(): Observable<TaskItem[]> {
    console.log('TRACE 2: HTTP GET request sent to API URL:', this.API_URL);
    return this.http.get<TaskItem[]>(this.API_URL, {
      headers: {
        'Cache-Control': 'no-store, no-cache, must-revalidate, max-age=0',
        'Pragma': 'no-cache',
        'Expires': '0',
      }
    });
}

For the backend ASP.NET side, the log also shows it retrieved the latest data from the database.

TaskController.cs:

[HttpGet]
public async Task<ActionResult<IEnumerable<TaskItem>>> GetTasks()
{
    _logger.LogInformation("TRACE 3: HttpGet - fetching tasks from database...");

    try
    {
        var tasks = await _context.Tasks.ToListAsync();
        _logger.LogInformation("Loaded {Count} tasks from DB", tasks.Count);
        _logger.LogInformation("Tasks returned: {Ids}", string.Join(", ", tasks.Select(t => t.Id)));

        return tasks;
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, "ERROR loading tasks from DB");
        return StatusCode(500, "Failed to load tasks");
    }
}

But once it reached back the frontend, it shows a list of old data that I've deleted.

app.ts:

loadTasks(): void {
    this.taskService.getTasks().subscribe({
      next: (items) => {
        console.log('LOAD TASKS FROM API:', items);
        this.tasks.set(items);
      },
      error: (err) => console.error('Failed to load tasks', err)
    });
}

The old data is reloaded to my web page and I have an error when attempting to delete them.

From browser console:

The API URL only shows:

[ { "id": 186, "title": "Design PostgreSQL schema ...." } ]

I've drastically implemented no-cache on several places.

1. staticwebapp.config.json:

   {
       "routes": [
           {
               "route": "/api/*",
               "rewrite": "https://microjira.reddesert-44c5d750.westeurope.azurecontainerapps.io/api/*",
               "headers": {
                   "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
                   "Pragma": "no-cache",
                   "Expires": "-1"
               }
           }
       ],
       "navigationFallback": {
          "rewrite": "/index.html",
          "exclude": ["/api/*"]
       },
       "globalHeaders": {
         "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0"
       }
   }
   

2. Program.cs:

   app.UseAuthorization();
   
   app.Use((context, next) =>
   {
       context.Response.Headers["Cache-Control"] = "no-cache, no-store, must-revalidate";
       context.Response.Headers["Pragma"] = "no-cache";
       context.Response.Headers["Expires"] = "0";
       return next();
   });
   
   app.MapControllers();
   

3. task.service.ts (in the second earliest screenshot)

If needed I'll give the link to the website and source code.

Thank you very much for any help.