Question

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

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

我能够请求数据而没有CORS问题。（CORS设置在后端完成）

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

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

Chrome控制台的输出在这里

从原点“ http://localhost:54602/units(3)”到“ 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方法在React项目中不起作用

1 个答案: