Nokitjsとフロントエンドの開発にクロスドメインの問題を解決するために、

問題

数の開発では、「1ページのアプリケーション、」多くの場合、担当のではなく、同じプロジェクトの下で、その後、開発プロセス別の人を持っていることがあり、そのようなRESTfulなAPI、一般的に「フロントエンド」と「サーバー側のAPI」などのAjaxとサーバの通信を、使用私たちは、クロム等のクロスドメインの問題は、コンソールでこのエラーメッセージが表示されます発生することがあります。

XMLHttpRequest cannot load http://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.io' is therefore not allowed access.

セキュリティ上の理由のブラウザは、「同一生成元ポリシーは」時々、開発プロセスをもたらすために少し問題を取得して、「クロスドメイン」を許可していません。

一般的な方法

1.アクセス制御 - 許可 - 起源

現在主流のブラウザは、応答ヘッダ情報サーバを追加することによってサポートAccess-Control-Allow-Originのようなものと宣言「ドメイン」からクロスドメイン要求を許可します。

Access-Control-Allow-Origin: xxx.xyz

また、任意のソースのクロスドメインリクエストを可能にすることができます

Access-Control-Allow-Origin: *

いくつかのシーンは、「本番環境」で使用する必要がある*場合は、開発環境、*Anquanチーを見るために、本番環境にデプロイする場合、手動または自動モード、あなたが交換する必要があり、その後、「特定のドメインを。」

もちろん、あなたは、このようなの上として、開発環境では、特定の「ドメイン」を指定することができxxx.xyz、すべての開発者が追加する必要があること、開発プロセス、host次のように設定を：

127.0.0.1 xxx.xyz

1. nginxのリバースプロキシ

解決するには代理店とのクロスドメインの問題は、何も「応答ヘッダ」を追加し、WebServerのnginxのは、「開発のため」に設定した後、私たちは、「送信先アドレス」を楽しみに特定のURLを置くことができるとしていない場合、フロントエンドとフィールドのアドレスを持つAjaxのリクエストは、とても自然に、nginxの設定は、およそ次の通り何の「クロスドメインの問題」は存在しません。

...
location /api/ {
    rewrite  ^/api/(.*)  /$1 break;
    ...
} 
...

あなただけのやや面倒まだnginxのを学ぶことができますが、が、この方法では、各フロントエンドの開発者は、nginxのをインストールして設定する必要があります。

この問題を解決するNokitjs

Nokitjsは「A Web開発フレームワーク」および/ KOA / HAPIを発現し、ここで、各フレームの長所と短所を比較するが、「クロスドメイン」問題を解決しない「WebアプリケーションやWebサイト」を開発するための他の同様のフレームワーク。

Nokitjsは、端末に直接Nokitをインストールするには、「コマンドラインツール、」使用「Nokit CLI」グローバルな必要性を提供します。

npm install nokitjs -g

Nokit CLIは、一般的に「Nokitに基づいてアプリケーションの開発」を開始するために使用されますが、以下のように、それはまた、「指定されたディレクトリ」のことは、「静的なウェブサーバー」を起動するには：

nokit start [端口] [应用目录省略时为当前目录] [其它选项]

そこにある「その他のオプション」-pulibcのオプションは、あなたが「静的リソースディレクトリ」を指定することができ、次のコマンドは、現在のディレクトリ「静的なウェブサーバ」を開始します

npm start 8000 -public=./

どのようにクロスドメインの問題を解決するには？、あなたはまた、プラグインで必要なnokit-filter-proxy、我々はプロジェクトを持っている場合は、次のように記述例に続いて、構造化：

应用目录
├── dist
├── package.json
└── src

dist「ビルド・ツールは、」ターゲット・ディレクトリが構築されsrc、ソースディレクトリである、package.jsonそれはNPMパッケージ構成ファイルです。

インストールnokitjsとnokit - フィルタ - プロキシとに保存 devDependencies

npm install nokitjs nokit-filter-proxy --save-dev

コンフィギュレーションpackage.jsonのscripts次のように、

...
"scripts": {
    "start": "nokit start 8000 -public=./dist",
    "stop": "nokit stop",
    "restart": "npm stop && npm start",
    ...
}
...

さて、「アプリケーション一覧」で実行nokitjs、「あなたは世界をインストールする必要はありません」。

npm start

「静的なウェブサーバ」を起動するには、次のプロンプトが表示されます。

[Nokit][L]: Starting...
[Nokit][L]: The server on "localhost:8000" started

あなたは、ブラウザでアクセスすることができhttp://localhost:8000、A。

その後のconfigure nokit-filter-proxy、「アプリケーションディレクトリ」に新しいファイルを作成しconfig.json、以下のように記述します。

{
    "filters": {
        "^/": "nokit-filter-proxy"
     },
     "proxy": {
        "rules": {
          "^/api/(.*)": "http://xxx.xyz/"
        }
     }
}

構成されたとして、最初のレジスタはnokit-filter-proxy、すべて、転送ルールを追加する/apiURLの先頭に前進http://xxx.xyz/例えば、：

GET /api/user/id

それはに転送されます

GET http://xxx.xyz/user/id

あなたは、転送ルールの任意の数の、複数のルールにより、後の高い最適化レベルを追加することができます。

nginxのは、あなたが直接実行した後に、コードを取得することができ、nginxの設定インストールするには、各開発者を必要としない、簡単に多くのと比較しました

npm install

あなたが使用することができ、インストールに依存するすべて完了しnpm start、ブラウザでサーバーを起動し、プレビューまたはデバッグします。

また、ときそれがによって呼び出される-configようなコンフィギュレーション・ファイル名オプションを指定します

nokit start 8000 -public=./dist -config=webserver

このように、アプリケーションのルートディレクトリをconfig.json交換することができるwebserver.jsonまで。

おそらく、また、我々は別の「アドレス」に転送異なる「環境」をしたいか、各開発者が異なる転送ルールができる必要と-envも異なるが、以下に指定された環境設定で指定された「NODE_ENVシステム環境変数」で

nokit start 8000 -public=./dist -env=local

若しくは

export NODE_ENV=local

このように、アプリケーションは、カタログ作成できるconfig.local.jsonファイル形式をしてconfig.json、「デフォルトのプロファイル」の設定をカバーする同じ構成セクション「環境プロファイル」と同じ、nokitは、これら2つのファイルをマージします。

最後に、関連するモジュールGitHubのアドレスを添付：

nokitjs https://github.com/nokitjs/nokit
nokit -フィルタ-プロキシます。https：//github.com/nokitjs/nokit-filter -...

問題

一般的な方法

1.アクセス制御 - 許可 - 起源

1. nginxのリバースプロキシ

この問題を解決するNokitjs

おすすめ