proxy.conf.js无法在具有Angular的ASP.NET核心应用程序中工作

wlsrxk51  于 2022-11-19  发布在  .NET
关注(0)|答案(3)|浏览(124)

我正在尝试通过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.jsonserve部分:

"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身份验证一起工作这一事实有关,或者我在这里做错了什么?

nbysray5

nbysray51#

尝试将**[控制器][操作]显式添加到proxy.config.js**中
就像这样:

const PROXY_CONFIG = [
{
   context: [
   "/api/Test/Get", 
  ],
  target: "https://localhost:7139",
  secure: false
 }
 ]

 module.exports = PROXY_CONFIG;
gupuwyp2

gupuwyp22#

我遇到了同样的问题。一个小时后,我想起Angular使用**作为catch all而不是 *。

const PROXY_CONFIG = [
  {
    context: [
      "/api/**",
    ],
    target: "https://localhost:7139",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

我认为如果proxy.conf.js文件的格式与json文件的格式相同,可以使用一个 *。

{
  "/api/*": {
    "target": "https://localhost:7139",
    "secure": false
  }
}
z9zf31ra

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值。

相关问题