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

【问题标题】：How to resolve CORS issue on my ExtJS store如何解决我的 ExtJS 商店中的 CORS 问题
【发布时间】：2021-05-04 02:55:29
【问题描述】：

我需要使用 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”标头。

我不确定是否应该在我的 API 或我的 SPA 上进行一些调整，但我已经删除了所有与 CORS 相关的代码，而且它可以在我的其他 SPA 上运行。

编辑

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

services.AddCors();

在配置方法下

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

【问题讨论】：

您只能在 API 服务器上允许 cors。没有办法在您的客户端上执行此操作，因为它没有任何意义。你的 API 使用什么框架，你有源代码吗？
我正在使用 .NET 5 Web API 我将使用 API 代码更新问题。

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

【解决方案1】：

我能够通过更改我的 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。希望这对其他人有帮助。谢谢。

【讨论】：