DevExtreme ODataStore Remove 方法 withCredentials 在 React 项目中不起作用 [重复]

Question

我遇到了关于从 devextreme odatastore 中删除实体的问题。

我在本地有两个项目，后端项目在 localhost:54602 上运行，前端项目在 localhost:3000 上运行（react app）

我能够在没有 CORS 问题的情况下请求数据。 （CORS 设置在后端进行）

但是当我尝试从 ODataStore 中删除一个实体并在调试模式下查看后端时

context.User.Identity.IsAuthenticated 变量更改为 false。请求失败。

Chrome 控制台输出在这里

从源“http://localhost:3000”访问“http://localhost:54602/units(3)”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：预检请求不允许重定向。

我阅读了有关that link about CORS Preflight的所有信息

我的 CORS 设置在这里。

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();
            }
        );

        .
    }

在反应应用程序中，我正在创建这样的 oDataStore

export default class extends React.Component {  

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

.
.
}

最后像这样删除调用。

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

我们会接受任何帮助。期待您的回复。

祝你有美好的一天。

Answer 1

我在后端服务器项目中跟踪了输出。

面对这种情况，前端的DELETE请求首先发送OPTIONS请求as documented here。

我目前正在使用这样的中间件。

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

并像这样配置了 OPTIONS 请求。

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;
        }

        .
        .
        .
    }

2 天没有人回答。我被搜查了。

我希望这些信息可以节省您的时间。

有一个好的编码。