Angular 6 無法使用代理從外部服務器 API 獲取數據

Question

我正在使用本地 angular 應用程序，但在從外部服務器上的 API 獲取數據時遇到問題。 我嘗試使用代理，所以我創建了文件proxyconfig.json並通過以下方式將它包含在命令行中

ng serve --proxy-config proxyconfig.json

這是內容：

{
    "/api/*": {
    "target": "https://bittrex.com/api/v1.1/public/",
        "secure": false,
        "pathRewrite": {
            "^/api": ""
        },
        "changeOrigin": true
    }
}

我需要傳遞變量，所以我創建了服務OrderBookService ：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { OrderBook } from './order-book.model';


@Injectable({
    providedIn: 'root',
  })
export class OrderBookService {
    constructor(private httpClient: HttpClient) {

    }
    getOrderBookBittrex(currency1: string, currency2: string): Observable<OrderBook[]> {
        const url = `http://localhost:4200/api/getorderbook?market=${currency1}-${currency2}&type=both`;
        return this.httpClient.get<OrderBook[]>(url);
    }
}

問題是當我想獲取這些數據並將其保存到我的組件中的變量時，路徑沒有正確轉換：它正在向http://localhost:4200/api/getorderbook?market=BTC-LTC&type=both發送請求而不是https://bittrex.com/api/v1.1/public/getorderbook?market=BTC-LTC&type=both ：

  private getTransfers(): void {
    const currency1 = 'BTC';
    const currency2 = 'LTC';
    this.orderBookService.getOrderBookBittrex(currency1, currency2)
      .subscribe(orders => {
        this.orderBook = orders;
      });
  }

有誰知道如何正確地做到這一點？

當我像這樣將所有路徑放入 proxconfig.json 時，它工作正常：

{
    "/api/*": {
        "target": "https://bittrex.com/api/v1.1/public/getorderbook?market=BTC-LTC&type=both",
        "secure": false,
        "pathRewrite": {
            "^/api": ""
        },
        "changeOrigin": true
    }
}

但我需要傳遞變量。

Answer 1

你編碼

getOrderBookBittrex(currency1: string, currency2: string): Observable<OrderBook[]> {
    const url = `http://localhost:4200/api/getorderbook?market=${currency1}-${currency2}&type=both`;
    return this.httpClient.get<OrderBook[]>(url);
}

只需更改網址即可

getOrderBookBittrex(currency1: string, currency2: string): Observable<OrderBook[]> {
    const url = `/api/getorderbook?market=${currency1}-${currency2}&type=both`;
    return this.httpClient.get<OrderBook[]>(url);
}

您不需要在代碼中使用http://localhost:4200 。

和"pathRewrite": { "^/api": "" },不需要太多