How to resolve CORS issue on my ExtJS store - api

Question

I am required to use Ext.Store not Ext.Ajax as my requirement. Here is my code:
Ext.define('Vidly.store.Customers', {
extend: 'Ext.data.Store',
alias: 'store.customers',
storeId: 'customers',
model: 'Vidly.model.Customer',
autoLoad: true,
proxy: {
type: 'ajax',
headers : {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, DELETE, PUT',
'Access-Control-Allow-Headers': 'x-requested-with, Content-Type, origin, authorization, accept, client-security-token'
},
api : {
read : 'https://localhost:44378/api/Customers'
},
reader: {
type: 'json',
}
}
});
I keep getting this error: XMLHttpRequest at 'https://localhost:44378/api/Customers?_dc=1612003742512&page=1&start=0&limit=25' from origin 'http://localhost:1967' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I am not sure if I should adjust something on my API or on my SPA but I already removed all CORS related code plus it works on my other SPA.
EDIT
Here is my .NET 5 API Startup under ConfigureServices method
services.AddCors();
and under Configure method
app.UseCors(options => options.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());

Answer 1

I was able to resolve the issue by changing my Ext Store call for some reason it is sending default headers that the API rejects. The video guides in the internet uses my previous syntax, luckily I found a better syntax that overrides the default headers.
Here is the code
Ext.define('Vidly.store.Customers', {
extend: 'Ext.data.Store',
alias: 'store.customers',
storeId: 'customers',
model: 'Vidly.model.Customer',
autoLoad: true,
proxy: {
type: 'rest',
url: 'https://localhost:44313/api/Customers',
useDefaultXhrHeader: false,
reader: {
type: 'json',
headers: { 'Accept': 'application/json' },
}
}
});
Using type as rest not ajax. Hope this helps others. Thanks.