为什么新控制器不能在上为React Template工作.NET核心6

Question

我正在用ASP启动代码。NET核心6 Web API和React启动模板，但经过数小时的研究，我无法找出问题所在。

模板有这个控制器：

[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};
private readonly ILogger<WeatherForecastController> _logger;
public WeatherForecastController(ILogger<WeatherForecastController> logger)
{
_logger = logger;
}
[HttpGet]
public IEnumerable<WeatherForecast> Get()
{
return Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = DateTime.Now.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = Summaries[Random.Shared.Next(Summaries.Length)]
})
.ToArray();
}
[HttpGet("test")]
public Object Test()
{
return new int [] {};
}
}

我创建了方法Test并导航到/weatherforecast/test，我正确地得到了一个空数组，但当我创建新的控制器并尝试访问新的端点时，问题就来了。服务器将我重定向到index.html页面

这是控制器样本

[ApiController]
[Route("api/[controller]")]
public class WeatherController : ControllerBase
{
[HttpGet]
public Object Get()
{
return new int [] {};
}
}

我用[Route("[controller]")]、[Route("weather")]进行了测试，并在浏览器url/weather或/api/weather中键入内容，我总是看到带有顶部导航栏的主页面，我希望它会返回一个带有空数组的json结果。请提供任何帮助，我们将不胜感激。

这是Program.cs文件的内容：

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
// The default HSTS value is 30 days. You may want to change this for production 
scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
app.MapFallbackToFile("index.html");
app.Run();

Answer 1

在我的情况下，它可以通过以下步骤解决：

1. 打开ClientApp\src\setupProxy.js
2. 将中所需的路径添加到context常量：

const context =  [
"/weatherforecast",
"/api" // <-- this is an added item
];

我的直观理解是，默认模板运行一些react开发http服务器，该服务器将请求重定向到ASP。NET核心服务器。

若请求的路径和模式不匹配，它会为自己服务，所以我们的请求不会到达ASP。NET核心服务器。

Answer 2

Net 6 react模板通过在本地部署到不同的端口，将前端(react(与后端(C#web API(分离。您可以检查launchSettings.json以查看应用程序正在部署的端口："applicationUrl"："https://localhost:7027；http://localhost:5027"，

如果您在那里找不到它，请检查ClientApp/src/setupProxy.js以查看正在使用的端口：

const target=env。ASPNETCORE_HTTPS_PORT？https://localhost:${env.ASPNETCORE_HTTPS_PORT}：env。ASPNETCORE_URLS？env。ASPNETCORE_URLS.split('；'([0]：'http://localhost:6973'；