如何解决我的 ExtJS 商店中的 CORS 问题

Question

我需要使用 Ext.Store 而不是 Ext.Ajax 作为我的要求。这是我的代码：

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',
        }
    }
});

我不断收到此错误：来自来源 'http://localhost:1967' 的 'https://localhost:44378/api/Customers?_dc=1612003742512&page=1&start=0&limit=25' 处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin' header 存在于所请求的资源上。

我不确定我是否应该在我的 API 或我的 SPA 上调整一些东西，但我已经删除了所有 CORS 相关代码而且它适用于我的其他 SPA。

编辑

这是我的 .NET 5 API 在 ConfigureServices 方法下启动

services.AddCors();

并在配置方法下

app.UseCors(options => options.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());

Answer 1

由于某种原因，我可以通过更改我的 Ext Store 调用来解决问题，它发送的默认值 headers 被 API 拒绝。互联网上的视频指南使用我以前的语法，幸运的是我找到了一个更好的语法来覆盖默认的 headers.

这是代码

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' },
        }
    }
});

使用类型作为休息而不是 ajax。希望这对其他人有帮助。谢谢

如何解决我的 ExtJS 商店中的 CORS 问题

How to resolve CORS issue on my ExtJS store

api

asp.net-core

.net-core

extjs

cors