Angular Js 7 用自己的 Base Url 覆盖 azure Web Api url

Question

我在 Azure Web 应用程序中托管了两个单独的 Web 应用程序。

一个是基于angularjs 8前端，一个是后端.net core web API 2.2.

我已经创建了一个基本方法来从网络 API 调用值 return 值 1 和值 2，类似地还有一些其他 API 方法 return 我json.

如果我在浏览器中调用 https://B.azurewebsites.net/api/values 其中 return 我的值 1 和值 2 成功。

现在我的前端 angular Web 应用程序正在尝试通过 http://localhost:4200 在本地计算机运行中调用 Web api 并调用 Azure 托管 Web api 如下所示

export class ApiDataService 
{
private REST_API_SERVER = "";  //mentioned in constant file under services


  constructor(private httpClient: HttpClient) {
     this.REST_API_SERVER = "https://B.azurewebsites.net/api";
  }


public getList() {
    return this.httpClient.get(this.REST_API_SERVER + 
     "/employee/getlist").pipe(catchError(this.handleError));
  }

在本地机器上，运行很好。

在 Azure 中部署 angular 网络应用程序时抛出错误 404，消息为：

#

http:https://A.azurewebsites.net/B.azurewebsites.net/api/employee/getlist

的失败响应

#

在这里 A.azurewebsites.net -> Angular 网络应用程序

B.azurewebsites.net -> .Net 核心 Web api 2.2

我找不到 azurewebsites 调用两次的任何原因它应该简单地调用 https://B.azurewebsites.net/api/employee/getlist

我还从 angular 项目中的 index.html 中删除了“/”，例如

<base href=""/> --removed the "/"

如何在 employee.component.ts

中重置基数 url

任何建议或评论都会很有帮助。

Answer 1

我必须创建一个派生自 HTTPClient 的 class 并设置基础 URL，如下所示：


@Injectable()
export class ApiHttpClient extends HttpClient {
  public baseUrl: string;

  public constructor(handler: HttpHandler,
    private constName: ConstNameService ) {
    super(handler);

    // Get base url from wherever you like, or provision ApiHttpClient in your AppComponent or some other high level
    // component and set the baseUrl there.
    this.baseUrl = constName.apilocalUrl.prod_api_url;//'/api/';
  }

  public getMethod(url: string, options?: Object): Observable<any> {
    url = this.baseUrl + url;
    return super.get(url, options);
  }
}

现在在服务模块中使用这个class来获取数据列表

constructor(private constName: ConstNameService,
    private apiclient :ApiHttpClient ) {}


  public getEmpList() {
   this.apiclient.getMethod("/employee/getlist").pipe(catchError(this.handleError));
  }

Angular Js 7 用自己的 Base Url 覆盖 azure Web Api url

Angular Js 7 overwrite the azure Web Api url with it own Base Url

angularjs-directive

angular-ui-router

azure-web-app-service

angular

#

#