我正在使用本地 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
    }
}

但我需要传递变量。

#1楼 票数: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": "" },不需要太多

  ask by Zomfire translate from so

未解决问题?本站智能推荐:

1回复

添加代理配置后,Angular 外部 API 调用继续在poort 4200 上提供服务

我已经进行了所有必要的代理配置,但我的 Angular 仍然服务于 4200,在那里我收到 404 错误。 我究竟做错了什么? 代理配置文件 包.json 环境.ts 服务.ts
1回复

从AWS上的HTTPS Django + Angular服务器调用外部HTTP API

这可能吗? 我正在建立一个电子商务网站,该网站要求调用基于HTTP构建的外部api服务。 我的网站基于django(后端)和angular2(前端)构建在AWS EBS上。 如果我尝试从角度角度调用HTTP api,则会弹出混合内容错误,这显然是Chrome浏览器阻止了该调用。 有没
1回复

为什么 Angular 代理服务器将原始 url 复制到请求 url?

我的 angular 项目运行在http://127.0.0.1:4200从http://127.0.0.1:4200/login我向运行在http://127.0.0.1:8000/api/register的 api 发出请求但是由于请求的 URL 错误,我收到错误 404:“ http://12
1回复

Angular2 / Angular种子http-proxy-middleware代理api请求

我正在使用Angular Seed项目,并尝试为在其他端口上运行的后端服务的api请求设置代理。 到目前为止,我的代码: 基本上我需要做的是将任何与http:// localhost:5555 / basepath / api匹配的api路由到http:// localhost:7
1回复

在nginx上托管静态angular2应用程序并将http请求代理到后端api

如何让angular2路由工作并将http请求代理到另一台机器上的rest api? 我在nginx服务器上有一个angular2 web应用程序,它提供静态html文件。 我在另一台具有不同IP地址的计算机上托管了一个单独的rest api。 我已将位置设置为/在我的nginx配置文
1回复

在 ng 服务器中使用等效的 proxy-config 选项来运行 ng e2e

我正在使用其他文章中描述的 proxy-config 将我的 Angular 应用程序中的调用重定向到我的后端 API。 我使用以下作为我的proxy.conf.json文件:- 这很好用,将 API 调用重定向到我的 Node/Express 存根 API 服务。 当我使用 Angular
1回复

proxy.conf.json 在 Angular 6 中没有按预期工作

在我的应用程序中,我有一个 proxy.conf.json 文件来绕过 cors 策略。 虽然现在控制台没有错误。 返回结果似乎存在问题。 当我知道响应在 iTunes api 上有 50 张专辑时,它在我的 json 中给出了 0 结果。 代理配置文件 服务.ts 组件.ts 想法好
2回复

当使用Node Express作为代理服务器时,我可以在我的React项目中同时使用模拟数据和代理api数据吗?

在我的React项目开发过程中,我使用express来配置代理服务器。 有一个api接口调用总是失败,所以我想模拟这个。 我尝试了很多次,但还是失败了。 有人知道如何配置吗? 非常感谢您的回复。