イオン2では、XMLHttpRequestのはLaravelのAPI

Question

で...ロードすることはできません。これは私のシナリオです：

XMLHttpRequest cannot load http://phi.dev/api/login. Redirect from 'http://phi.dev/api/login' to 'http://localhost:8100/' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect. 

私は地元のAungular2 /イオン2アプリケーションとユーザーを認証するためのLaravelのWeb APIを持っています。 Angular2モジュールからこのWeb APIを呼び出すと、上記の例外が発生します。

注：Chromeネットワークでは、私の角度サービスが2回呼び出される可能性があります。最初にリクエストメソッドを使用：オプションと2回目はリクエストメソッド：GetはHttp 302を返します。

誰でもこの問題の解決方法を知っていますか？

ありがとうございます。

Answer 1

リクエストは外部であり、アプリケーションをローカルで提供しているため、CORSの問題が発生します。

（ionic serveを使用している場合）は、イオン構成ファイルにローカルプロキシを設定する必要があります。

Ionic 2のプロジェクトディレクトリを確認し、ionic.config.jsonというファイルを探します。通常、プロジェクトのルートディレクトリにあります（そこにはpackage.jsonなどが必要です）。

ファイルを開き、これは（その1の前の行は、カンマ（,）で終了していること、それはJSONファイルなので、必ずすることを忘れないでください）を追加：

"proxies": [ 
    { 
     "path": "/server", 
     "proxyUrl": "http://phi.dev" 
    } 
    ] 

がで、今HTTPリクエストを実行しているセクションで、http://phi.devを/serverに置き換えます。私はここに例を挙げます。

あなたはおそらくこのように、テストおよびコンパイル環境用のデバッグフラグを入れたいので、私は、しかし、、このような編集がコンパイルされたアプリが動作しないようになりますことを認識することが、あなたをお勧めします：

class MyServiceOrComponent { 
    private debug: boolean = true; // Set this flag to FALSE when you need to actually compile the app for any real device. 
    private server: string = this.debug ? "/server" : "http://phi.dev"; 

    constructor(private http: HTTP) { 
     const login = "/api/login"; // don't to it exactly like that, make a static list or something like this to store paths. 
     let request = this.http.get(this.server + login).then((res) => { 
     console.log(res); 
     }); 
    } 
} 

簡単に説明すると、「ローカルホスト」としてHTTPリクエストを実行すると、（CORSポリシーのために）例外がスローされます。これは、テスト環境（localhost）でアプリケーションを実行している場合にのみ発生します。このようなことを避けるために、プロキシーを提供して、要求が有効になるようにします。