Приложение Angular 7 не может получить доступ к веб-API после публикации

Question

У меня есть приложение Angular 7 с .Net core 2.1, когда приложение публикуется, оно не может получить доступ к 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 при синтаксическом анализе для http://localhost/"

" Неожиданный токен <в JSON в позиции 0 "</p>

ИЛИ

«Http-сообщение об ошибке для http://localhost/v1/CheckAvailability: 404 Not Found»

Answer 1

Я могу предложить вам изменить конечную точку API в файле ts следующим образом:

в заголовке файла:

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 !!!

Надеюсь, что это поможет вам *

Answer 2

LocalHost - это стандартное имя хоста, присвоенное адресу локального компьютера, а IP-адрес вашего локального хоста - 127.0.0.1.

Насколько я понимаю, ваш API размещен на сервере вашего локального компьютера.машина.Поэтому, когда вы программируете локально, angular может достичь localhost, потому что вы находитесь на машине.

Ваш локальный API не публикуется в Интернете, поэтому он доступен только локально.Поэтому, когда вы публикуете свое угловое приложение, оно больше не может получить доступ к вашему API.

Вам нужно также опубликовать свой API на сервере, доступном онлайн, и соответственно изменить ссылку.