CORS, тип содержимого поля заголовка не разрешен в предварительном ответе, .NET React

Я знаю, что здесь много вопросов о CORS, но я не могу заставить его работать, и я застрял на несколько дней.

Я работаю над небольшим приложением React ts и реализую вызовы API для базового .NET webAPI. Я уже реализовал получение в приложении, теперь я застрял на POST.

Вот ошибка: доступ к XMLHttpRequest по адресу «https://localhost:7122/api/Products/» из источника «http://localhost:3000» был заблокирован политикой CORS: тип содержимого заголовка запроса не разрешен Access-Control-Allow-Headers в предварительном ответе.

Вот POST-код React

function postData(post: { id: number; pName: string; pDesc: string; }) {
        axios.post(uri, { post })
            .then(res => {
                console.info(res);
                console.info(res.data);
            })
            .catch((error) => {
                console.info(error);
              })
    }

А вот реализация контроллера .NET

[Route("api/[controller]")]
[ApiController]
public class ProductsController : ControllerBase
{
    private readonly ProductContext _context;

    public ProductsController(ProductContext context)
    {
        _context = context;
    }

    [HttpPost]
    public async Task<ActionResult<ProductDTO>> PostTodoItem(ProductDTO todoDTO)
    {
        var todoItem = new Product
        {
            Description = todoDTO.Description,
            Name = todoDTO.Name
        };

        _context.Products.Add(todoItem);
        await _context.SaveChangesAsync();


        /*return todoDTO;*/
        return Ok();
    }
}

Вот мой Program.cs, где я должен применить политику useCors()


using Microsoft.AspNetCore.Cors.Infrastructure;
using Microsoft.EntityFrameworkCore;
using TodoApi.Models;
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();

builder.Services.AddDbContext<ProductContext>(opt =>
    opt.UseInMemoryDatabase("TodoList"));

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: "MyCorsPolicy",
    policy =>
    {
        policy.WithOrigins("https://localhost:7122", "https://localhost:3000")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
    });
});
var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseCors("MyCorsPolicy");
app.MapControllers();
app.Run();

И мой простой DTO


public class ProductDTO
{
    public long Id { get; set; }
    public string? Name { get; set; }
    public string? Description { get; set; }
}

Сейчас я только пытаюсь получить ответ Ok(). Предварительный запрос OPTIONS принимается правильно, но затем что-то идет не так с ответом. Нет проблем с Swagger или Postman, я могу правильно отправить сообщение оттуда.

Я уже несколько дней просматривал здесь и в документах .NET, но предлагаемые решения не работают. Я установил плагин Chrome, и во время его тестирования он сказал, что POST тоже должен работать. Насколько я понимаю, эта проблема должна быть решена уже с использованием политики useCors() в .NET, но, как показано, она все еще сохраняется. Что мне не хватает?

Как видно, я новичок в веб-разработке, поэтому, если нужна какая-либо другая информация, пожалуйста, простите меня и дайте мне знать, спасибо.

@AmoghSarpotdar уже просмотрел сообщение, спросил в 2016 году, к сожалению, ни одно из предложенных решений не работает.

Oscar Naretto 21.12.2022 12:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Замените https://localhost:3000 в своем полисе на http://localhost:3000, что соответствует вашему происхождению.

Как бы я ни чувствовал себя глупым, чтобы признать это, это была реальная проблема. Большое спасибо!

Oscar Naretto 21.12.2022 14:07

Другие вопросы по теме