我正在尝试通过this教程设置一个带有Angular前端的ASP.NET核心应用程序。我已经能够成功地创建项目,并且我也能够完美地运行和调试它们。问题是由于某种原因,我无法代理后端调用到ASP.NET核心后端来工作。当我尝试从Angular应用程序调用控制器内的操作时,404错误提示
下面是我的proxy.conf.js文件:
const PROXY_CONFIG = [
{
context: [
"/api/*",
],
target: "https://localhost:7139",
secure: false
}
]
module.exports = PROXY_CONFIG;
这是我的TestController
,我创建它是为了进行测试:
[Authorize]
[ApiController]
[Route("api/[controller]")]
public class TestController : ControllerBase
{
private readonly ILogger<TestController> _logger;
public TestController(ILogger<TestController> logger)
{
_logger = logger;
}
[HttpGet("{id}")]
public string Get(int id)
{
return "Test response";
}
}
下面是我如何尝试从Angular应用程序中调用它:
this.http.get<string>(`api/test/1`).subscribe((value) => {
alert(value);
},
(error) => {
alert(`Error: ${error.error}`);
});
这就是proxy.conf.js
如何添加到我的angular.json
的serve
部分:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angularproject1.Client:build:production"
},
"development": {
"browserTarget": "angularproject1.Client:build:development"
}
},
"defaultConfiguration": "development",
"options": {
"proxyConfig": "src/proxy.conf.js"
}
},
我已经检查了proxy.conf.json
中的端口和,它确实与ASP.NET核心项目中launchSettings.json
文件的applicationUrl
项中指定的端口匹配。
{
"$schema": "https://json.schemastore.org/launchsettings.json",
"iisSettings": {
"windowsAuthentication": true,
"anonymousAuthentication": false,
"iisExpress": {
"applicationUrl": "http://localhost:30959",
"sslPort": 44345
}
},
"profiles": {
"WebApplication1": {
"commandName": "Project",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "https://localhost:7139;http://localhost:5139",
"dotnetRunMessages": true
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}
这仍然不起作用的原因可能是什么?这可能与我试图让它与Windows身份验证一起工作这一事实有关,或者我在这里做错了什么?
3条答案
按热度按时间nbysray51#
尝试将**[控制器][操作]显式添加到proxy.config.js**中
就像这样:
gupuwyp22#
我遇到了同样的问题。一个小时后,我想起Angular使用**作为catch all而不是 *。
我认为如果proxy.conf.js文件的格式与json文件的格式相同,可以使用一个 *。
z9zf31ra3#
我在Ubuntu上使用VS代码时也遇到了同样的问题。我所需要做的就是将我的X1 M0 N1 X的X1 M1 N1 X条目更新为X1 M2 N1 X,然后我就可以将我所有的控制器更改为使用X1 M3 N1 X前缀的路由。
使用代理的原因是您的dotnet应用程序在一个端口上运行,而您的angular应用程序在另一个端口上运行。当您按下F5时,VS代码将启动两个应用程序,并通过angular端口加载UI。
如果你查看默认项目中的
fetch-data-component
,你会发现它注入了一个BASE_URL
。这个基本url使用angular应用监听的端口。建议在你的服务中使用这个BASE_URL
,并允许代理完成它的工作。例如,一个请求[angular app]+/api/customers需要解析到dotnet app,这就是
proxy.conf.js
的目的。为了区分angular路由和dotnet api路由,
PROXY_CONFIG
中的context
值用于触发到dotnet应用程序的重定向。这就是/api/**
的作用,angular使用**-wildcard
捕获所有以api
-前缀开头的传入url,然后将它们重定向到任何target
值。