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

Question 1

angular-cli ng serve地元のdevのサーバー、それは私のプロジェクトディレクトリからすべての静的ファイルを提供しています。

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

Question 2

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ファイルを使用してプロキシを設定することはお勧めしません。公式の方法は以下のようなものです

下を見るよう"start"にあなたの編集package.json

"start": "ng serve --proxy-config proxy.conf.json",
proxy.conf.jsonプロジェクトのルートで呼び出される新しいファイルを作成し、その中に次のようにプロキシを定義します
```
{
  "/api": {
    "target": "http://api.yourdomai.com",
    "secure": false
  }
}
```
重要なのは、npm start代わりに使用することですng serve

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

Question 3

以下の例で知っておくべきことを説明します。

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

/ folder / sub-folder / *：パスによると：Angularアプリケーション内にこのパスが表示されたら（パスはどこにでも保存できます）、何かを実行したいと思います。*文字は、サブフォルダーに続くすべてのものが含まれることを示します。たとえば、/ folder / sub-folder /内に複数のフォントがある場合、*はそれらすべてを取得します
上記のパスの「target」：「http：// localhost：1100」は、ターゲット URLをホスト/ソースにするため、バックグラウンドでhttp：// localhost：1100 / folder / sub-folder /になります。
"pathRewrite "：{"^ / folder / sub-folder /"： "/ new-folder /"}、ここで、アプリケーションをローカルでテストするとします。http：// localhost：1100 / folder / sub- folder /に無効なパスが含まれている可能性があります：/ folder / sub-folder /。このパスをhttp：// localhost：1100 / new-folder /である正しいパスに変更したいので、pathRewriteは非常に便利になります。アプリケーション内のパス（左側）を除外し、新しく作成されたパス（右側）を含めます
「安全」：httpまたはhttpsのどちらを使用しているかを表します。ターゲット属性でhttpsが使用されている場合は、セキュア属性をtrueに設定し、そうでない場合はfalseに設定します。
"changeOrigin"：オプションは、ホストターゲットが現在の環境ではない場合にのみ必要です（例：localhost）。ホストをプロキシのターゲットとなるwww.something.comに変更する場合は、changeOrigin属性を「true」に設定します。
"logLevel"：属性は、開発者がターミナル/ cmdでプロキシを出力するかどうかを指定するため、画像に示されているように「debug」値を使用します。

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

それが機能する場合は、cmd / terminalに次のようなものが表示されるはずです。

Question 4

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

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

proxy.conf.json以下に完全に示されています：

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

Question 5

編集：これは現在のAngular-CLIでは機能しなくなりました

最新のソリューションについては、@ imal hasarangapereraからの回答を参照してください

のサーバー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

angle-cliバージョンの現在：1.0.0-beta.0

Question 6

より柔軟性が必要な場合のプロキシの別の方法は次のとおりです。

'router'オプションといくつかのjavascriptコードを使用して、ターゲットURLを動的に書き換えることができます。このためには、「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-options

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

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;

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

Question 7

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

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

ルートフォルダーにproxy.conf.jsonというファイルを設定した後、package.jsonを編集して、起動時にプロキシ構成を含めます。スクリプトに「start」：「ngserve --proxy-config proxy.conf.json」を追加した後、ngserveではなくnpmstartを実行します。これにより、package.jsonのフラグ設定が無視されます。

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

Question 8

プロキシパスは、ターゲットとして構成したものに追加されることに注意することが重要です。したがって、次のような構成：

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

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

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

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

Question 9

ステップ1：ルートフォルダーに移動し、proxy.conf.jsonを作成します

{
  "/auth/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

スニペットを展開

ステップ2：package.jsonに移動し、その下にある「scripts」を見つけて「start」を見つけます

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

スニペットを展開

ステップ3：httpに/ auth /を追加します

 return this.http
      .post('/auth/register/', { "username": 'simolee12', "email": 'xyz@gmail.com', "password": 'Anything@Anything' });
  }

スニペットを展開

ステップ4：ターミナル実行の最終ステップnpm start

Question 10

誰かが同じターゲットまたはTypeScriptベースの構成への複数のコンテキストエントリを探している場合。

proxy.conf.ts

const proxyConfig = [
  {
    context: ['/api/v1', '/api/v2],
    target: 'https://example.com',
    secure: true,
    changeOrigin: true
  },
  {
    context: ['**'], // Rest of other API call
    target: 'http://somethingelse.com',
    secure: false,
    changeOrigin: true
  }
];

module.exports = proxyConfig;

ng serve --proxy-config = ./ proxy.conf.ts -o

Question 11

別の実用的な例（@ 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

Question 12

Cors-originissueのスクリーンショット

私のアプリケーションでは、Corsの問題に直面しています。上記のスクリーンショットを参照してください。プロキシ設定を追加した後、問題は解決されました。私のアプリケーションのURL：localhost：4200とリクエストするAPIのURL： " http://www.datasciencetoolkit.org/maps/api/geocode/json?sensor=false&address= "

API側のコードなしの許可が許可されています。また、サーバー側でcors-issueを変更できず、angular（クライアント側）でのみ変更する必要がありました。

解決する手順：

srcフォルダー内にproxy.conf.jsonファイルを作成します。

   {
      "/maps/*": {
        "target": "http://www.datasciencetoolkit.org",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
      }
    }

APIリクエストで

this.http
      .get<GeoCode>('maps/api/geocode/json?sensor=false&address=' + cityName)
      .pipe(
        tap(cityResponse => this.responseCache.set(cityName, cityResponse))
      );

注：Apiリクエストではホスト名のURLをスキップしています。リクエストを送信すると、自動的に追加されます。proxy.conf.jsを変更するたびに、ng-serveを再起動する必要があります。そうすると、変更のみが更新されます。

angle.jsonの構成プロキシ

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "TestProject:build",
            "proxyConfig": "src/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "TestProject:build:production"
            }
          }
        },

これらの手順を完了した後、ng-serveプロキシを再起動して期待どおりに正しく機能するここを参照してください

> WARNING in
> D:\angular\Divya_Actian_Assignment\src\environments\environment.prod.ts
> is part of the TypeScript compilation but it's unused. Add only entry
> points to the 'files' or 'include' properties in your tsconfig.
> ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** : Compiled
> successfully. [HPM] GET
> /maps/api/geocode/json?sensor=false&address=chennai ->
> http://www.datasciencetoolkit.org

Question 13

proxy.conf.jsonを追加します

{ "/api": { "target": "http://targetIP:9080", "secure": false, "pathRewrite": {"^/proxy" : ""}, "changeOrigin": true, "logLevel": "debug" } }
1. package.jsonで、 "start": "ng serve --proxy-config proxy.conf.json"
2. コードでleturl = "/ api / clnsIt / dev / 78"; このURLはhttp：// targetIP：9080 / api / clnsIt / dev / 78に翻訳されます