Angular CLIでプロキシを設定する方法

Question

新しい@ angular/cliプロジェクトを作成し、ルートコンポーネントにhttp GETコールを1つ追加しました。プロキシを使用しないとうまく動作しません。

export class AppComponent implements OnInit { 
    constructor(private http: Http) {} 

    ngOnInit() { 
    this.http 
     .get('https://dog.ceo/api/breeds/list/all') 
     .map(response => response.json()) 
     .subscribe(data => console.log(data)); 
    } 
} 

Angular CLI wikiに記載されている設定を追加しようとすると、問題が発生します。

マイproxy.conf.jsonファイル：

{ 
    "/api": { 
    "target": "https://dog.ceo", 
    "secure": false 
    } 
} 

私は/api/breeds/list/allにコンポーネントにURLを変更しました。そして私は逃げたng serve --proxy-config proxy.conf.json

私はブラウザのコンソールで内部サーバーエラーメッセージを表示しています。そして、私がサービスを始めた端末で、私はこのメッセージを受け取ります。[HPM] Error occurred while trying to proxy request /api/breeds/list/all from localhost:4200 to https://dog.ceo (EPROTO) (https://nodejs.org/api/errors.html#errors_common_system_errors)

私はいくつかの他の設定オプションと複数のAPIを試しました。結果は似ています。

完全なコードはGitHubの上で提供されています：使用https://github.com/ErikNijland/angular-cli-proxy-test

バージョン：

• 角度/ CLI @：1.3.0
• NodeJS：V8.1.4

注：私は@ angular/cliがWebpackを使用していることを理解しています。これは、http-proxy-middlewareを使用しています。

Answer 1

私はあなたがhttpsフォームhttpを要求している起源のために起こっていると思います。これは、プロキシのフラグを使用して解決できます。

{ 
    "/api": { 
    "target": "https://dog.ceo", 
    "secure": false, 
    "changeOrigin": true 
    } 
}