时间戳

首页 > 解决方案 > 如何在 VS 2017 中设置 Angular 7 与 net core web api 进行通信

c# - 如何在 VS 2017 中设置 Angular 7 与 net core web api 进行通信

问题描述

我搜索了高和低以获得良好的响应。我要解决的问题是...我有一个 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 并且它也成功运行。

启动.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");
            }
        });

包.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) 时发生错误。

我觉得有一些简单的东西我只是忽略了。

标签： c#node.jsangularasp.net-core-webapiangular7

解决方案

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

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

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

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

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

推荐阅读