Хотя CORS является большой проблемой при работе ReactJS в сочетании с ASP.Net-Core, я понял, как включить CORS, поэтому при доступе к моему пользовательскому интерфейсу (http://localhost:3000), который использует вызовы SignalR/REST для API (http://localhost:51761).
Вот Startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(option =>
{
option.AddPolicy("myCors",
builder =>
{
builder.AllowAnyHeader().AllowAnyMethod().SetIsOriginAllowed(origin =>
{
if (origin.StartsWith("http://localhost")) return true;
if (origin.StartsWith("http://vdedarh02331")) return true;
if (origin.StartsWith("http://10.65.1.23")) return true;
return false;
});
});
});
services.AddControllers();
services.AddSwaggerGen(c => { c.SwaggerDoc("v1", new OpenApiInfo {Title = "SimpleAPI", Version = "v1"}); });
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "SimpleAPI v1"));
}
app.UseHttpsRedirection();
app.UseRouting();
app.UseCors("myCors");
app.UseAuthorization();
app.UseEndpoints(endpoints => { endpoints.MapControllers(); });
}
В моем приложении React я делаю следующий вызов API:
axios
.post("http://localhost:51761/Simple/Login")
.then((response) => console.info(response))
.catch((error) => {
console.error(error);
console.info("Trying to use IP");
axios
.post("10.65.1.23:51761/Simple/Login")
.then((resp) => console.info(resp))
.catch((err) => console.error(err));
});
Открытие пользовательского интерфейса через браузер с URL-адресом http://10.65.1.23:3000 работает нормально. Выполнение запроса к API приводит к следующей ошибке.
Имеет смысл, что вызов localhost:51761 не будет работать, потому что браузер пытается вызвать API на компьютере браузера.
При отладке кода сервера во внутренней функции SetIsOriginAllowed я понял, что источник всегда будет оцениваться каждый раз, когда я делаю запрос при использовании пользовательского интерфейса на моей машине разработки (localhost), но никогда при использовании другой машины.
Я неправильно понял CORS или сделал неправильную настройку? Спасибо за вашу помощь!





при настройке необходимо указать номер порта с URL-адресом.
В Startup.cs
builder =>
{
builder.WithOrigins("http://localhost:51761")
.AllowAnyHeader()
.AllowAnyMethod();
});
Также укажите на уровне контроллера
[EnableCors("MyPolicy")]
public class SimpleController : Controller
Я сам разобрался с проблемой.
Итак, на самом деле вам нужно установить прокси-сервер в ваших проектах реагирования package.json на URL-адрес API. Кроме того, вам нужно сделать ваш http-запрос динамическим и установить тип содержимого запроса на не-text/html
Поэтому изменение клиентского кода с
axios
.post("http://localhost:51761/Simple/Login")
.then((response) => console.info(response))
.catch((error) => {
console.error(error);
console.info("Trying to use IP");
axios
.post("10.65.1.23:51761/Simple/Login")
.then((resp) => console.info(resp))
.catch((err) => console.error(err));
});
к
axios
.post(
"/Simple/Login",
{},
{ headers: { "Content-Type": "application/json" } }
)
.then((response) => {
console.info(response);
})
.catch((error) => {
console.error(error);
console.info("Trying to use IP");
axios
.post(
"/Simple/Login",
{},
{ headers: { "Content-Type": "application/json" } }
)
.then((resp) => {
console.info(resp);
})
.catch((err) => console.error(err));
});
Это не помогло. Я также не знаю, почему я должен дополнительно включать CORS на уровне контроллера. Также моя конфигурация содержит функцию, которая проверяет происхождение.