Ionic CROSのドメイン横断問題

22403 ワード
Ionic
原文のリンク:http://ionichina.com/topic/54f051698cbbaa7a56a49f98
本人の翻訳力には限りがありますので、翻訳の不正確なところは避けられません.適当に見てください.牛が迫ると英語版を見に行ってください.用事が終わったら、帰ってきて教えてください.
もしあなたが ionic serveまたは ionic runを通じて(通って)使用またはlive reloadを命令したり、外部APIの結点にアクセスしたなら、CORSの問題に遭遇したことがあります.
XMLHttpRequest cannot load http://api.ionic.com/endpoint.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8100' is therefore not allowed access.
問題が来ました.何がCORSですか?また何がこの問題を引き起こしたのですか?
何がCORSですか
CORS=Cross origgin resource sharring(ドメイン別リソース共有)originは今見ているホームステーションです.今訪問しているのはhttp://ionicframework.com/blog/handling-cors-issues-in-ionicです.originは ionicframework.comです. http://cors.api.com/apiにAJAX要求を開始すると、ホットオリジンは、ブラウザによって自動的にCORS要求に組み入れられるOrgin headerによって指定されます.tohttp://cors.api.com/apiyour host origgin will be specified by the Origin header that is auttic ally includ for CORS requests by the browser.)＊ionicframework.comと api.comのホストは一致していないので、一つのHTTP OPTTIONS要求ヘッダのformにおいて、 ionicframework.comから開始したアクセスサーバリソースの要求は全てサーバの承認を得る.
上の要求が間違っていたら(サーバに許可されない)、サーバから(api.com上の)リソースにアクセスできません.
ちょっと見てみましょう.ionic serve、ionic run、ionic run -lを通してアプリを実行しているときのoriginは何ですか?
ブラウザでの実行 ionic serveを運行していますが、何が起きましたか?
ローカルウェブサーバが起動されました.
あなたのブラウザが開いて、ローカルサーバアドレスに位置しています.
これはあなたのアプリケーションを見てあなたのコンピュータの前のブラウザにロードさせます.住所はhttp://localhost:8100です. originは localhost:8100です.
他の localhost:8100ホストに送信されていない任意のAJAX要求は、localhost:8100を彼のオリジンとしています.これはCORSの事前検査を経て、サーバリソースにアクセスできるかどうかを確認する必要があります.
設備上の運行 ionic runを運行していますが、何が起きましたか?
アプリのすべてのファイルはデバイス(またはシミュレータ)にコピーされます.アプリが起動し、携帯電話/シミュレータ上のブラウザをトリガして、コピーされたファイルにアクセスします.  file://some/path/www/index.htmlあなたが運転しているURIは file://ですので、あなたの originは存在しないと思います.外部からの要求はCORS要求を必要としません.
設備でlivereloadを使って運転します. ionic run -lを運行していますが、時又では何が起きましたか?
ローカルサーバを起動しました.
アプリが起動し、携帯電話/シミュレータのブラウザをトリガしてhttp://192.168.1.1:8100を介してファイルを実行します. originは 192.168.1.1:8100です.
いずれも192.168.1.1:8100ではないサーバに送信されるAJAX要求は、CORSの事前検査要求を行う必要があり、サーバ上のリソースにアクセスできるかどうかを確認する.
ionicでCORS問題を解決します.
CORSの問題は、私たちが ionic serveまたは ionic run -lを通してアプリケーションを実行またはテストするときにのみ発生します.
この問題を解決するためには二つの方法があります.一つ目は比較的簡単なものです.あなたのAPIサーバの端でオリジンがすべて許可されていますが、私たちが訪問したすべての結点を制御することはできません.必要なのはoriginを指定しない要求です.
私たちはプロキシを使ってこの問題を解決できます.私達はIonic CLIがどのように構成しやすいプロキシサーバーを提供しているかを見にきました.
Ionic CLIプロキシサーバー
エージェントの迅速な定義について:
       ，            （           ），                        。
In computter networks、a proxy server is a server(a compter system or an appication)that acts as an intermediary for requests from clients seeking resource from from server.
私たちはCORSの問題を避けるために必要なのは、プロキシサーバーがあります.私たちの要求を受け入れて、APIノードから新しい要求を出して、結点応答を受信してから、私たちのアプリケーションにフィードバックして、CORSの問題を避けたいです.
Ionic CLIはあなたにプロキシサーバーを提供しています.
プロキシがあなたの目標ホストに新しい要求をしたので、もう originがありません.CORSは必要ありません.ブラウザにOrigin headerを追加することが重要です.
プロキシを設定
これらの設定は、アプリケーションを実行するためにionic serveおよびionic run -lを介してのみ必要であることに留意されたい.
まず、私たちは ionic.projectファイルに私たちのプロキシを設定する必要があります.これは私たちのIonicローカルサーバにこれらのアドレスを傍受して、これらの要求を私たちの宛先アドレスに送信します.
私たちのアプリケーションでは、 serveまたは run -lを実行するとき、私たちは訪問するノードアドレスをプロキシサーバのアドレスに置き換える必要があります.
gulpタスクのreplaceモジュールを使って、出口アドレスを変換するのは簡単です.
提案された方法は、Anglar Contentを設定して、代理しようとするAPIの位置を特定することです.
これが私たちが以下に採用する方法です.私たちは同時にAnglar Serviceを設置してAPIノードからデータを取得します.
プロキシパスを設定
たとえば、 http://cors.api.com/apiにアクセスしたいですが、 localhostからのオリジンは許可されていません.
プロキシの設定は、あなたのローカルIonicサーバにアクセスする必要がある pathと、最終的にAPIの proxyUrlにアクセスする必要がある2つのことを含む. ionic.projectでは、このように設定されています.
{
     
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
     
      "path": "/api",
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
}
ionic serveを介してサーバを起動します.
上記で指定したように、Ionicサーバアドレス http://localhost:8100/apiにアクセスすると、 http://cors.api.com/apiにあなたの名前でアクセスします.
これでCORSはいらないです.
Anglar Contentを設定します.
あなたのAPIの接合点をAnglar Contntsに設定するのはとても簡単なことです.
APIの結点を私たちの代理URLに指定します.
その後、正式な住所をコンサート・イベントとします.
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.constant('ApiEndpoint', {
     
  url: 'http://localhost:8100/api'
})
// For the real endpoint, we'd use this
// .constant('ApiEndpoint', {
     
//  url: 'http://cors.api.com/api'
// })
設定したら、次のようにアプリケーションにApiEndpointの依存を導入して、勝手にこのコンサートを呼び出すことができます.
Anglar Serviceを設定します.
angular.module('starter.services', [])

//NOTE: We are including the constant `ApiEndpoint` to be used here.
.factory('Api', function($http, ApiEndpoint) {
     
  console.log('ApiEndpoint', ApiEndpoint)

  var getApiData = function() {
     
    return $http.get(ApiEndpoint.url + '/tasks')
      .then(function(data) {
     
        console.log('Got some data: ', data);
        return data;
      });
  };

  return {
     
    getApiData: getApiData
  };
})
Gulpでアドレスを自動変換する
このプロセスでは、2つのタスクを追加するためにgulpfile.jsを修正する必要があります.プロキシの追加と削除.
まずreplaceモジュール-npm install --save replaceをインストールします.
// `npm install --save replace`
var replace = require('replace');
var replaceFiles = ['./www/js/app.js'];

gulp.task('add-proxy', function() {
     
  return replace({
     
    regex: "http://cors.api.com/api",
    replacement: "http://localhost:8100/api",
    paths: replaceFiles,
    recursive: false,
    silent: false,
  });
})

gulp.task('remove-proxy', function() {
     
  return replace({
     
    regex: "http://localhost:8100/api",
    replacement: "http://cors.api.com/api",
    paths: replaceFiles,
    recursive: false,
    silent: false,
  });
})
おわりに
本教程は、ionic serveまたはionic run -l命令によってアプリケーションを実行する時に発生するCORSの問題を解決する方法を示しています.
私たちは、ionic serveとionic run -lの間でAPIノードアドレスを変換する際に、面倒かもしれないことを知っています.比較的に提案された方法は、gulpプロセスを起動することです.
CORS問題を解決する一番簡単な方法はAPI提供者にすべてのhostsを許可させることです.
Anglar constantとreplaceモジュールを使って、CORSの折衷を避ける方法をくれます.
もし完全な例を見たいなら、このサンプル項目を見てもいいです.
これはCORSの制限があるAPIサーバにアクセスする必要がある時に知っておくべきすべてのことです.
また何か質問や質問やアイデアがありましたら、下記にコメントしたり、twitterやgithubで連絡してください.
アリ雲の下でECSはnodeサーバを構築します.