为什么新控制器不适用于 .NET Core 6 上的 React 模板答案

【问题标题】：Why new controllers are not working for React Template on .NET Core 6为什么新控制器不适用于 .NET Core 6 上的 React 模板
【发布时间】：2023-03-16 03:04:02
【问题描述】：

我正在使用 ASP.NET Core 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")] 进行了测试，并在浏览器网址中输入/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();

【问题讨论】：

嗨@Dariel Ramos，WeatherForecastController 和WeatherController 都存在于 react 项目中吗？如果是这样，似乎不可能出现你所说的。如果是 404，那么两个控制器都是 404。请再次检查您的 WeatherForecastController。此外，如果你在asp.net 6中使用react项目，它包含两个端口号。当你运行应用程序时，它会显示一个面板，告诉你代理端口号和本地端口号。如果要调用api，需要使用代理端口号发送请求。
详细解释，如果请求是404，它会像你说的那样回退到index.html，只有navbar。
@Rena 我打开浏览器 devtools 并检查从 react 发送的所有请求，然后根据我的新端点更改 url 的最后一部分，没有任何反应。例如：原始请求 localhost:4221/weatherforecast 更改为 localhost:4221/weather 这让我觉得我的项目中只能有一个控制器，这真的很奇怪
我想在应用程序之外使用我的端点，因为在开发了后端和一些前端管理系统之后，我将创建一个移动应用程序，因此这些问题对我来说非常重要
@Rena 你说得对，我试图从错误的端口获取我的 API 的 JSON 结果。非常感谢

标签： c# reactjs asp.net-core asp.net-core-webapi

【解决方案1】：

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

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

const 目标 = env.ASPNETCORE_HTTPS_PORT ？ https://localhost:${env.ASPNETCORE_HTTPS_PORT}： env.ASPNETCORE_URLS ？ env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:6973';

【讨论】：