Angular 6 Unable to get data from external server API using proxy

Question

I'm using local angular app and I get problem to get data from API on external server. I tried to use proxy, so I create file proxyconfig.json and I included it in command line via

ng serve --proxy-config proxyconfig.json

And here is content:

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

I need to pass variables so I created service 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);
    }
}

The problem is when I want to get this data and save it to variable in my component, path is not translating properly: it's sending request to http://localhost:4200/api/getorderbook?market=BTC-LTC&type=both instead of 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;
      });
  }

Anybody knows how to do it properly?

It's working fine when I put all path to proxconfig.json like this:

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

But I need to pass variables.

send request to 'bittrex.com/api/v1.1/public/…' instead of 'localhost:4200/api/getorderbook?market=${currency1}-${currency2}&type=both' what's the confusion here? — Jameel Moideen
– Jameel Moideen, Commented Oct 12, 2018 at 14:38
It doesn't work that way for CORS reason: Failed to load bittrex.com/api/v1.1/public//…: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:4200' is therefore not allowed access. So I trying to use proxy — Zomfire
– Zomfire, Commented Oct 12, 2018 at 14:42

Сервер Усеинов · Accepted Answer · 2018-10-12 15:06:35Z

1

You code

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);
}

Just change url like

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

You don't need use http://localhost:4200 in you code.

And "pathRewrite": { "^/api": "" }, don't need too

answered Oct 12, 2018 at 15:06

Сервер Усеинов

261 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zomfire Over a year ago

Works. Can You tell me how to auto update view from this API server without refreshing page?

Сервер Усеинов Over a year ago

See - Reactive Forms - for Forms, and you can use ngModel for any ouputs

Сервер Усеинов Over a year ago

Example (paginator): someArray - we put some data from server getSome(page) = func in service, get data of one page of few ---------------- in .ts file page:number = 1 someArray:any[]=[] someChange(page){ this._req.getSome(page).subscribe( result=>{ this.someArray = result['some_content'] } ) } if .html file <div *ngFor="let elem of someArray "> {{elem}} </div> <nav> <ul> <li (click)="someChange(1)">Page 1</li> <li (click)="someChange(2)">Page 2</li> </ul> </nav>

Collectives™ on Stack Overflow

Angular 6 Unable to get data from external server API using proxy

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related