我很少深入到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章:不一样的东西
2条答案
按热度按时间bmvo0sr51#
根据您的HttpErrorResponse,您不是在向.NET API发送请求,而是在向
localhost:4200
发送请求,我相信这就是您的Angular应用程序。尝试发送如下请求:
如果这样做有效,则说明您的代理配置对请求造成了干扰。请确保端口正确,并在.NET应用程序启动后启动Angular应用程序。您可以在
launchSettings.json
中检查端口,但要小心,因为http和https使用不同的端口。如果您的证书未配置,请使用http
。不要忘记在
"serve"
下的angular.json
中包含proxy.conf.json
,如下所示:bvhaajcl2#
为了扩展@Ocram的答案--这是绝对正确和相关的--,我还发现,如果你有一个上下文:[]list位于proxy.conf.jsfile * 中的PROXY_CONFIG定义中 (要重定向到后端端口的路径/控制器的列表),则需要确保此列表包含所需的所有控制器名称。
这是因为当你重命名一个控制器时,你还需要通知客户端代理配置有关的变化。