Как исправить ошибку Cors в реакции и asp.net в локальной среде ⇐ C#

[Anonymous]

Я переписываю крупное бизнес-приложение — в настоящее время только интерфейсная часть, использующая стек React, и для серверной части ей необходимо работать со старой версией приложения.
Я пытаюсь включить связь между этими двумя приложениями. В настоящее время только в локальной среде, поскольку в более высоких средах он будет запускаться из того же источника, если он использует старый бэкэнд. Надеюсь, в будущем с .NET Core будет намного проще
Лучшим решением в моем случае будет программный вариант, поскольку у меня нет прав администратора для настройки IIS и т. д.
Бэкэнд (из заголовков):

Код: Выделить всё

Server: Microsoft-IIS/10.0
Aspnet-Version: 4.0.30319
Aspnetmvc-Version: 4.0
Powered-By: ASP.NET

Ориентация на .NET Framework 4.8
Fronend:

Код: Выделить всё

React: 18.2.0
axios: 1.6.8

Я сделал отдельные контроллеры для приложения React. Этим контроллерам необходимо получать файлы cookie (аутентификация).
В основном абстрактном классе контроллера я переопределяю метод OnResultExecuted, чтобы добавлять заголовки для локальной среды выполнения.

Код: Выделить всё

public abstract class ReactAPIController : Controller
{
protected override void OnResultExecuted(ResultExecutedContext filterContext)
{
#if DEBUG
Response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:3000");

Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");

Response.Headers.Add("Access-Control-Allow-Credentials", "true");
#endif
base.OnResultExecuted(filterContext);
}
}

На стороне внешнего интерфейса я создал экземпляр axios, для параметра withCredentials установлено значение true, и экспортировал его:

Код: Выделить всё

import axios from "axios";

const API = axios.create({
baseURL: backendUrl + 'ReactAPI',
withCredentials: true,
});

export
{
API
};

И почти это работает, почти. Точнее, он работает только для запроса GET.
Все остальные типы — нет: POST, PUT, DELETE.< /p>

Код: Выделить всё

import { API } from '../api';

await API.get('...'); // works fine, returns 200 and data

const data = {
//...
};
await API.post('...', data);   // results in CORS error. Breakpoint on backend won't get hit.

Я пытался добавить эти заголовки в файл web.config, но это ничего не изменило.
Я пытался также отправить запрос без создания экземпляра axios

Код: Выделить всё

axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'http://localhost:13000/ReactAPI';

await axios.post('.../Test', data, {
headers: {
"origin": 'http://localhost:3000'
}
});

Как видите, я пытался добавить к запросу заголовок источника (конечно, это не сработало), поскольку в инструментах разработки я видел, что другие типы запросов не работают. не отправлять ни этот заголовок, ни файлы cookie.
Заголовок Access-Control-Allow-Origin также не может быть установлен в подстановочный знак, поскольку он приводит к следующей ошибке

Невозможно загрузить XMLHttpRequest.... Значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком «*», когда учетные данные запроса режим «включить». Таким образом, доступ к источнику «http://localhost:3000» запрещен. Режим учетных данных запросов, инициированных XMLHttpRequest, контролируется атрибутом withCredentials

Я не знаю, что еще можно сделать. Когда я запускаю его с того же сервера, он работает нормально (политика того же происхождения)

Подробнее здесь: https://stackoverflow.com/questions/785 ... nvironment