web-dev-qa-db-ja.com

/ apiへの呼び出しをプロキシするためにngサービスをカスタマイズしますか?

Ng CLIを使用して新しいアプリケーションを作成しました。チャームのように機能します。ng new babysteps cd babysteps ng serve ng serveはwebpackを使用してアプリをアセンブルします。完全にテストするには、APIモックサーバーから/api...を提供する必要があります(具体的にはPOSTリクエスト)。使用するWebサーバーをカスタマイズして、その1つのURLパターンをリダイレクトするには?

Webpack devサーバーには プロキシ設定 がありますが、(?)ng serveには設定ファイルがありません(または取得できませんでした)。

webpack.config.jsを作成する必要がありますか、それともプロキシする他のファイルを作成/編集する必要がありますか?

26
stwissel

本当に、angular cli、--proxy-configフラグを使用して、バックエンドにプロキシを設定できます。

これは多かれ少なかれ documentation からのコピーアンドペーストです:

http:// localhost:3000/api で実行されているサーバーがあり、 http:// localhost:4200/api へのすべての呼び出しがそのサーバーに移動するとします。

プロジェクトの隣にpackage.jsonという名前のファイルを作成し、その内容をproxy.conf.jsonと呼びます

{
    "/api":
    {
        "target": "http://localhost:3000",
        "secure": false
    } 
}

[...]

package.jsonファイルの起動スクリプトを編集して

"start": "ng serve --proxy-config proxy.conf.json"

npm startで実行します

61
Fredrik Lundin