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

时间:2021-01-30 10:58:49

标签: api asp.net-core .net-core extjs cors

我需要使用 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',
        }
    }
});

我不断收到这个错误:XMLHttpRequest at 'https://localhost:44378/api/Customers?_dc=1612003742512&page=1&start=0&limit=25' from origin 'http://localhost:1967' has been Blocked by CORS策略:对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。

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

编辑

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

services.AddCors();

在配置方法下

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

1 个答案:

答案 0 :(得分:0)

我能够通过更改我的 Ext Store 调用来解决该问题,因为某些原因它正在发送 API 拒绝的默认标头。互联网上的视频指南使用了我以前的语法,幸运的是我找到了一个更好的语法来覆盖默认标题。

这是代码

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。希望这对其他人有帮助。谢谢。