DevExtreme ODataStore Remove method withCredentials not working in React project

Question

I faced an issue about removing an entity from devextreme odatastore.

I have two project on my local, backend project working on localhost:54602, front end project running on localhost:3000 ( react app )

I am able to request data without CORS problem. ( CORS settings did in backend )

But when I try to delete an entity from ODataStore and looking backend in debugging mode

context.User.Identity.IsAuthenticated variable changing to false. And request failed.

Chrome console output is here

Access to XMLHttpRequest at 'http://localhost:54602/units(3)' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

I read all about that link about CORS Preflight

My CORS setting is here.

public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();
        .
        .
        .
    }

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        .
        app.UseCors(options =>
            {
                options.WithOrigins("http://localhost:3000")
                .WithMethods("GET", "POST", "PUT", "PATCH", "POST", "DELETE", "OPTIONS")
                .AllowAnyHeader()
                .AllowCredentials();
            }
        );

        .
    }

In react app I am creating oDataStore like that

export default class extends React.Component {  

.
.
oDataStore = new ODataStore(
{
  key: 'Oid',
  version: 4,
  url: 'http://localhost:54602/units',
  withCredentials : true
});

.
.
}

And at the end removing call like this.

this.oDataStore.remove(this.state.selectedUnit.Oid).then(
                (key) => { 
                  alert(`${key} will be delete.`);
                },
                (error) => 
                { 
                  alert(`${error} occured.`);
                }
              );

Any help would be accepted. I look forward to your replies.

Have a nice day.

Answer 1

I traced the output in backend server project.

Faced that, front end's DELETE request firstly sends OPTIONS request as documented here.

I am currently using Middleware like that.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
   .
   .
   app.UseMiddleware<UnauthorizedRedirectMiddleware>();
   .
}

And configured OPTIONS request like that.

public async Task InvokeAsync(HttpContext context)
    {
        if (context.Request.Method == "OPTIONS")
        {
            context.Response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:3000");
            context.Response.Headers.Add("Access-Control-Allow-Credentials", "true");
            context.Response.Headers.Add("Access-Control-Allow-Methods", "DELETE");
            context.Response.Headers.Add("Access-Control-Allow-Headers", "content-type");
            context.Response.StatusCode = (int)HttpStatusCode.OK;
            return;
        }

        .
        .
        .
    }

Nobody answered for 2 days. And I am searched.

I hope this information save your time.

Have a good coding.