VS 2022中的ASP.Net核心WebApi项目:重命名控制器时出现404

hc2pp10m  于 2022-12-01  发布在  .NET
关注(0)|答案(2)|浏览(411)

我很少深入到Web开发,并使用以下链接来构建一个小项目:https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-angular?view=vs-2022
使用这个项目,我已经去重命名控制器,现在当加载页面时,请求返回404。如果我重新命名它,页面按预期加载(在下面的三个组件中,通过将产品重命名为天气预报)。我重命名的三个地方如下。这仍然是使用虚拟数据,因为我学习Angular 。
在这里做一个简单的重命名会错过什么?
product.component.ts:

export class ProductComponent implements OnInit {
 public forecasts?: Products[];

 constructor(http: HttpClient) {
 http.get<Products[]>('/products').subscribe(result => {
  this.forecasts = result;
}, error => console.error(error));
}

proxy.conf.js:

const PROXY_CONFIG = [
  {
    context: [
      "/products",
    ],
    target: "https://localhost:7050",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

产品控制器:

using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    [ApiController]
     [Route("[controller]")]
    public class ProductsController : ControllerBase
    {
        private static readonly string[] Summaries = new[]
        {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

        private readonly ILogger<ProductsController> _logger;

        public ProductsController(ILogger<ProductsController> logger)
        {
            _logger = logger;
        }

        [HttpGet(Name = "GetProducts")]
        public IEnumerable<Products> Get()
        {
            return Enumerable.Range(1, 5).Select(index => new Products
            {
                Date = DateTime.Now.AddDays(index),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = Summaries[Random.Shared.Next(Summaries.Length)]
            })
            .ToArray();
        }
    }
}

第404章:不一样的东西

bmvo0sr5

bmvo0sr51#

根据您的HttpErrorResponse,您不是在向.NET API发送请求,而是在向localhost:4200发送请求,我相信这就是您的Angular应用程序。
尝试发送如下请求:

http.get<Products[]>('https://localhost:7050/products').subscribe...

如果这样做有效,则说明您的代理配置对请求造成了干扰。请确保端口正确,并在.NET应用程序启动后启动Angular应用程序。您可以在launchSettings.json中检查端口,但要小心,因为http和https使用不同的端口。如果您的证书未配置,请使用http
不要忘记在"serve"下的angular.json中包含proxy.conf.json,如下所示:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
bvhaajcl

bvhaajcl2#

为了扩展@Ocram的答案--这是绝对正确和相关的--,我还发现,如果你有一个上下文:[]list位于proxy.conf.jsfile * 中的PROXY_CONFIG定义中 (要重定向到后端端口的路径/控制器的列表),则需要确保此列表包含所需的所有控制器名称。
这是因为当你重命名一个控制器时,你还需要通知客户端代理配置有关的变化。

const PROXY_CONFIG = [
    {
        ///-----------------
        context: [  
            "/weatherforecast",
            "/test",
            "/mynewapi",
        ],
        ///-----------------
        changeOrigin: true,
        target: target,
        secure: false,
        headers: {
            Connection: 'Keep-Alive'
        }
    }
]

相关问题