如何在 VS 2017 中设置 Angular 7 与 net core web api 进行通信答案

【问题标题】：How to setup angular 7 to communicate with net core web api in VS 2017如何在 VS 2017 中设置 Angular 7 与 net core web api 进行通信
【发布时间】：2019-06-02 19:05:19
【问题描述】：

我已经搜索了高和低的良好响应。我要解决的问题是……我有一个 VS 2017（社区）项目，该项目有一个 Angular 7 应用程序和一个网络核心 web api 后端都在同一个项目中。我可以使用 Postman 成功地测试 API，以便在数据库中发布和获取一些简单的数据。但是，当我尝试使用 Angular 前端来做同样的事情时，我得到一个 ERRCONNREFUSED 错误。

经过多次相互冲突/令人沮丧的网络搜索以找到一个简单的答案后，我开始尝试使用 proxy.config.json 文件。

proxy.config.json

{
  "/api": {
    "target": "http://localhost:8888",
    "secure": false
  }
}

我通过 npm start 启动 Angular 应用程序，它按预期在 4200 端口启动。

我启动了 dotnet run，它也运行成功了。

Startup.cs

     app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseAngularCliServer(npmScript: "start");
            }
        });

package.json

{  
"name": "client-app",
 "version": "0.0.0",
 "scripts": {
 "ng": "ng",
 "start": "ng serve --proxy-config proxy.config.json",
...}

我得到的错误如下：

尝试将请求 /api/clients 从 localhost:4200 代理到 localhost:8888 时出错（ERRCONNREFUSED）。

我觉得我只是忽略了一些简单的事情。

【问题讨论】：

您是否在端口 8888 上运行 http 代理？该错误暗示不
我也有点困惑你的 Angular 应用程序启动“在端口 4200”是什么意思 - Angular 是一种前端技术，不会打开监听端口，它是后端服务器（nodejs ?) 打开监听器..当前端需要数据时，它会连接到服务器并请求它。发布作为您的 Angular JavaScript 前端位的代码，询问数据？还可以从邮递员那里发布您的工作请求，甚至可以考虑让邮递员为您生成 JS - learning.getpostman.com/docs/postman/sending_api_requests/…
您能否显示您的服务器端 settings.json 文件和/或 startup.cs 设置 CORS 的位置，即客户端侦听域或 IP？
尽量把app.UseMvc()放在Startup.cs\Configure()的最后，但在app.Run()之前，以便在使用mvc之前设置所有配置。

标签： c# node.js angular asp.net-core-webapi angular7

【解决方案1】：

Proxy.config.json（从未见过）感觉它旨在让您的后端 nodejs 服务器将请求发送到另一个 Web 服务器，因此它应该指定另一个服务器。您似乎已声明此服务在您的本地主机上的 8888 上运行，但显然不是..

Web 浏览器脚本安全模型通常围绕客户端页面脚本编写，该脚本只能与页面来源的服务器进行通信。因此，如果您在http://myapi.myhost.com（生产中）有一个 api，并且您在本地机器上设置了 Angular 应用程序，那么页面来自本地机器，只能与本地机器上的服务器通信，所以localhost:4200 的服务器（可能是 nodejs）必须代表页面将请求代理到 myapi.myhost.com。

作为替代（更好）选项，您可以配置一些东西，以便可以从您的前端应用程序访问 api（不同的主机/端口），即使托管 api 的服务器没有为您的应用程序提供服务

你说你在 postman 中有一个工作请求，大概那个请求的目标是运行 api 的 web 服务器，所以配置代理，使其成为目标，而不是 localhost:8888（如果您发布工作邮递员的请求，即使是邮递员正在点击的网址的屏幕截图也会有所帮助）

如果 api 确实在 8888 上运行，并且您想通过代理而不是 CORS 来解决这个问题，我们需要做更多的工作来找出它无法连接的原因

【讨论】：

【解决方案2】：

感谢大家的快速回复。我发现让别人问我问题很有帮助。具体来说，来自 IP Kaal 的关于 CORS 设置的文章。在尝试响应时，我发现我没有在 Startup ConfigureServices 方法中注册 CORS。一旦我这样做了，该 api 就可以按预期与 Angular 前端一起工作。再次感谢大家。

【讨论】：