Angular 7 应用程序发布后无法访问 Web API答案

【问题标题】：Angular 7 appilication cannot reach web API once publishedAngular 7 应用程序发布后无法访问 Web API
【发布时间】：2019-06-27 22:55:28
【问题描述】：

我有一个带有 .Net core 2.1 的 Angular 7 应用程序，一旦应用程序发布它就无法访问 API，这意味着不能进行任何调用，但在我发布应用程序之前一切正常。（我使用IIS 10 Express 发布时） 可能是什么问题，我该如何解决？

我的代码中检查 API 是否可访问的调用示例：

（这是我的应用程序中的第一次调用）

let availabilityHTTPCall = this.http.get("/v1/CheckAvailability");
availabilityHTTPCall.subscribe(
  (result: boolean) => {
    this._webApiUnavalable = result;
    this.wizardOpen = true;
    console.log("HTTP Call returned data without error!", result);
  },
  (error) => {
    console.log("HTTP Call returned an error!", error);
    this._webApiUnavalable = false;
  },
  () => {
    console.log("HTTP Call complete!");
    this.PlacesOfService();
    this.LoadPhCodes();
  }
);

API 在控制器中的样子：

 [HttpGet]
 [Route("CheckAvailability")]
 public Boolean CheckAvailability()
 {
     return true;
 }

我通常会遇到以下错误之一

"http://localhost/ 解析时 Http 失败"

“JSON 中位置 0 处的意外标记

或

“http://localhost/v1/CheckAvailability 的 Http 失败响应：404 Not Found”

【问题讨论】：

因为你的目标仍然是 localhost？
从您的 Route 属性看来，有效的 url 是 localhost/CheckAvailability。如果包含“v1”，您检查过您的路线吗？
@PNDev....我确实检查过它在路线中确实包含 v1。

标签： angular visual-studio iis .net-core

【解决方案1】：

我可以建议您更改 ts 文件中的 API 端点，例如：

在文件头：

import {enviroment} from '../../../enviroment'; //<-- be sure to DONT import enviroment.prod


let availabilityHTTPCall = this.http.get(enviromen.API_URL + "/v1/CheckAvailability"); //< --HERE
availabilityHTTPCall.subscribe(
  (result: boolean) => {
    this._webApiUnavalable = result;
    this.wizardOpen = true;
    console.log("HTTP Call returned data without error!", result);
  },
  (error) => {
    console.log("HTTP Call returned an error!", error);
    this._webApiUnavalable = false;
  },
  () => {
    console.log("HTTP Call complete!");
    this.PlacesOfService();
    this.LoadPhCodes();
  }
);

然后在您的 enviroment.ts 文件中：

export const environment = {
  production: false,
  API_URL: 'http://localhost:5000/api/',

};

在您的 enviroment.prod.ts 文件中：

export const environment = {
  production: false,
  API_URL: 'https://YOUDOMAIN/api/',

};

因此，当您构建 PRODUCTION MODE (--prod) 时，它会将您的 ENDPOINT 从 localhost:5000 切换到您的 DOMAIN URL

希望对你有帮助

(localhost can't work for published app ..cause it will be the USER LOCALHOST and in that no WEBASERVER with any API is running!!!

希望对你有帮助！！！

【讨论】：

【解决方案2】：

LocalHost 是本地计算机地址的标准主机名，您的本地主机的 IP 地址是 127.0.0.1。

据我猜测，您的 API 托管在本地计算机上的服务器上。因此，当您在本地编程时，angular 可以访问 localhost，因为您在机器上。

您的本地 API 未在互联网上发布，因此只能在本地访问。因此，当您发布 Angular 应用程序时，它无法再访问您的 API。

您需要做的就是在可在线访问的服务器上发布您的 API，并相应地更改引用。

【讨论】：

我在 Visual Studio 中创建了整个应用程序，因此当我发布应用程序时，它同时发布了 API 和 Angular7 应用程序。