Я знаю, что здесь много вопросов о 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, но, как показано, она все еще сохраняется. Что мне не хватает?
Как видно, я новичок в веб-разработке, поэтому, если нужна какая-либо другая информация, пожалуйста, простите меня и дайте мне знать, спасибо.





Замените https://localhost:3000 в своем полисе на http://localhost:3000, что соответствует вашему происхождению.
Как бы я ни чувствовал себя глупым, чтобы признать это, это была реальная проблема. Большое спасибо!
@AmoghSarpotdar уже просмотрел сообщение, спросил в 2016 году, к сожалению, ни одно из предложенных решений не работает.