web-dev-qa-db-ja.com

angular-cliサーバー - 他のサーバーにAPIリクエストをプロキシする方法？

angular-cling serveローカル開発サーバーで、それは私のプロジェクトディレクトリからのすべての静的ファイルを提供します。

AJAX呼び出しを別のサーバーにプロキシするにはどうすればよいですか？

angularangular-cli
66
elwyn

アップデート2017

より良いドキュメントが利用可能になり、JSONとJavaScriptベースの両方の設定を使用できます。 angular-cliドキュメントプロキシ

httpsプロキシ設定の例

{
  "/angular": {
     "target":  {
       "Host": "github.com",
       "protocol": "https:",
       "port": 443
     },
     "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

Angular 2.0リリースに関する私の知る限りでは、.ember-cliファイルを使用してプロキシを設定することはお勧めできません。正式な方法は以下の通りです

  1. 下を見るためにあなたの"start"のpackage.jsonを編集してください

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

  2. プロジェクトのルートにproxy.conf.jsonという名前の新しいファイルを作成し、その中に以下のようにプロキシを定義します。

    {
  "/api": {
    "target": "http://api.yourdomai.com",
    "secure": false
  }
}

  3. 重要なことは、あなたがnpm startの代わりにng serveを使うということです

こちらからもっと読む： Proxy Setup Angular 2 cli

142
imal hasaranga perera

これは私のために働くことに近かった。また追加する必要がありました：

"changeOrigin": true,
"pathRewrite": {"^/proxy" : ""}

以下に示す完全なproxy.conf.json：

{
    "/proxy/*": {
        "target": "https://url.com",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
            "^/proxy": ""
        }
    }
}
23
Tony Scialo

この例であなたが知る必要があるをすべて説明します。

{
  "/folder/sub-folder/*": {
    "target": "http://localhost:1100",
    "secure": false,
    "pathRewrite": {
      "^/folder/sub-folder/": "/new-folder/"
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

  1. / folder/sub-folder/* path says：Angular 2アプリケーション内にこのパスが表示されたら（パスはどこにでも保存できます）、何かをしたいのですが。 *文字は、サブフォルダに続くすべてのものが含まれることを示します。たとえば、/ folder/sub-folder /の中に複数のフォントがある場合、*はそれらすべてを選択します。

  2. "target"： " http：// localhost：1100 "上記のパスはtarget urlをホスト/ソースにするため、バックグラウンドで http：// localhost：1100 /フォルダ/サブフォルダ/ になります。

  3. "pathRewrite"：{"^/folder/sub-folder /"： "/ new-folder /"}、アプリケーションをローカルでテストしたいとしましょう。 http： // localhost：1100/folder/sub-folder / 無効なパスに含まれている可能性があります：/ folder/sub-folder /このパスを http：// localhost：1100/new-folder / の正しいパスに変更すると、pathRewriteが非常に便利になります。アプリケーション内のパス（左側）を除外し、新しく書き込まれたパス（右側）を含めます。

  4. "secure"属性は、httpまたはhttpsを使用しているかどうかを表します。 httpsがtarget属性で使用されている場合は、secure属性をtrueに設定し、それ以外の場合はfalseに設定します。

  5. "changeOrigin"：オプションは、ホストターゲットが現在の環境ではない場合にのみ必要です（例：localhost）。ホストをプロキシのターゲットとなるwww.something.comに変更する場合は、changeOrigin属性を "true"に設定します。

  6. "logLevel"属性は、開発者が自分の端末にプロキシを出力したいかどうかを指定します。したがって、彼は画像に示すように "debug"値を使用します。

一般に、プロキシはアプリケーションをローカルに開発するのに役立ちます。ファイルパスを本番用に設定し、これらのファイルがすべてプロジェクト内にローカルにある場合は、プロキシを使用して、アプリケーション内で動的にパスを変更せずにファイルにアクセスできます。

それがうまくいけば、あなたはあなたのcmd/terminalにこのようなものが見えるはずです。

enter image description here

22
eugen sunic

編集：現在のAngular-CLIではこれは動作しません

最新のソリューションについては、@ imal hasaranga pereraの回答をご覧ください

angular-cliのサーバーは、ember-cliプロジェクトから取得されます。サーバーを構成するには、プロジェクトルートに.ember-cliファイルを作成します。そこにJSON設定を追加します：

{
   "proxy": "https://api.example.com"
}

サーバーを再起動すると、すべてのリクエストがそこでプロキシされます。

たとえば、/v1/foo/123で取得されているhttps://api.example.com/v1/foo/123に対して、コード内で相対的な要求を行っています。

サーバーの起動時にフラグを使用することもできます：ng serve --proxy https://api.example.com

angular-cliバージョンの場合：1.0.0-beta.0

9
elwyn

もっと柔軟性が必要な場合のもう1つのプロキシ方法は次のとおりです。

ターゲットURLを動的に書き換えるには、「router」オプションといくつかのJavaScriptコードを使用できます。このためには、 'start'スクリプトパラメータリストの--proxy-confパラメータとしてjsonファイルの代わりにjavascriptファイルを指定する必要があります。

"start": "ng serve --proxy-config proxy.conf.js --base-href /"

上記のように、<base href = "...">をindex.htmlのパスに設定した場合は、 - base-hrefパラメータも/に設定する必要があります。この設定はそれをオーバーライドするでしょう、そしてそれはhttpリクエストのURLが正しく構築されていることを確認することが必要です。

それから、あなたはあなたのproxy.conf.js（jsonではない！）の中に以下のような内容を必要とします：

const PROXY_CONFIG = {
    "/api/*": {
        target: https://www.mydefaulturl.com,
        router: function (req) {
            var target = 'https://www.myrewrittenurl.com'; // or some custom code
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

ルータオプションは2つの方法で使用できます。 1つは、キーが一致するように要求されたホスト/パスで、値が書き換えられたターゲットURLであるキーと値のペアを含むオブジェクトを割り当てる場合です。もう1つの方法は、カスタムコードを使って関数を割り当てる場合です。これは、ここでの例で示していることです。後者の場合、ルータオプションを機能させるには、ターゲットオプションをまだ何かに設定する必要があることがわかりました。カスタム機能をルーターオプションに割り当てた場合、ターゲットオプションは使用されないため、trueに設定するだけです。それ以外の場合は、デフォルトのターゲットURLにする必要があります。

Webpackはhttp-proxy-middlewareを使用していますので、役に立つドキュメントがあります。 https://github.com/chimurai/http-proxy- middleware/blob/master/README.md#http-proxy-middleware-オプション

次の例では、ルーターとしてカスタム関数を使用してターゲットURLを決定するためにCookieから開発者名を取得します。

const PROXY_CONFIG = {
    "/api/*": {
        target: true,
        router: function (req) {
            var devName = '';
            var rc = req.headers.cookie;
            rc && rc.split(';').forEach(function( cookie ) {
                var parts = cookie.split('=');
                if(parts.shift().trim() == 'dev') {
                    devName = decodeURI(parts.join('='));
                }
            });
            var target = 'https://www.'+ (devName ? devName + '.' : '' ) +'mycompany.com'; 
            //console.log(target);
            return target;
        },
        changeOrigin: true,
        secure: false
    }
};

module.exports = PROXY_CONFIG;

（クッキーはlocalhostとパス '/'に設定され、ブラウザプラグインを使用して長い有効期限が設定されています。クッキーが存在しない場合、URLはライブサイトを指します。）

2
Zoltan M

Angular-CLIのプロキシドキュメントはこちらにあります。

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

ルートフォルダにproxy.conf.jsonというファイルを設定したら、起動時にプロキシ設定を含めるようにpackage.jsonを編集します。 "start"： "ng serve --proxy-config proxy.conf.json"をスクリプトに追加したら、ng serveを実行せずにnpm startを実行します。これはpackage.jsonのフラグ設定を無視するためです。

angular-cliの現在のバージョン：1.1.0

2
Luuk Schoenmakers

これは他の実用的な例です（@ angular/cli 1.0.4）：

proxy.conf.json：

{
  "/api/*" : {
    "target": "http://localhost:8181",
    "secure": false,
    "logLevel": "debug"
  },
  "/login.html" : {
    "target": "http://localhost:8181/login.html",
    "secure": false,
    "logLevel": "debug"
  }
}

で実行します。

ng serve --proxy-config proxy.conf.json
1
Patrice

あなたがあなたのターゲットとして設定したものなら何でもにプロキシパス追加されるであることに注意することは重要です。だからこのような構成：

{
  "/api": {
    "target": "http://myhost.com/api,
    ...
  }
}

そしてhttp://localhost:4200/apiのようなリクエストはhttp://myhost.com/api/apiへの呼び出しになります。ここでの意図は、開発環境と本番環境の間に2つの異なる経路がないようにすることです。あなたがする必要があるのはあなたのベースURLとして/apiを使うことだけです。

したがって正しい方法は、apiパスの前にある部分、この場合はホストアドレスだけを使用することです。

{
  "/api": {
    "target": "http://myhost.com",
    ...
  }
}
0
codemusings