DevExtreme ODataStore Remove 方法 withCredentials 在 React 项目中不起作用

Question

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

我在本地有两个项目，后端项目在 localhost:54602 上工作，前端项目运行在 localhost:3000 上工作（react 应用程序）

我可以在没有 CORS 问题的情况下请求数据。（CORS 设置在后端完成）

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

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

Chrome 控制台输出在这里

对“http://localhost:54602/units(3)' from origin 'http://localhost:3000”处的 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();
            }
        );

        .
    }

在 React 应用程序中，我正在创建这样的 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 天没有人回答。我被搜索了。

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

好好编码。

DevExtreme ODataStore Remove 方法 withCredentials 在 React 项目中不起作用

DevExtreme ODataStore Remove method withCredentials not working in React project

c#

cors

asp.net-web-api

reactjs

devextreme