2016-12-01 17 views
0

ノードエクスプレスアプリケーションと通信するために脚を使用しているIonic Appがあります。ノードリニアレスを使用したイオンアプリでの潜在的なCORS問題

httpを使用するようにノードエクスプレスアプリケーションを設定していると、すべて機能しています。

イオンアプリケーション側:

RestangularProvider.setBaseUrl('http://11.22.33.44:3000'); 

// custom header 
interceptors.serialNumber = function (element, operation, what, url, headers, query) { 
    return { 
    headers: angular.extend({ 
     'x-serialnumber': deviceStore.serialNumber 
    }, headers) 
    }; 
}; 

Restangular.one(‘Admin’).get() 
.then(function (data) { 
    console.log(data); 
    }, function (error) { 
    console.log(error); 
}); 

ノードエクスプレスアプリケーション側:「例:

var app = express(); 
app.use(cors()); 
app.get('/Admin, function(req, res) { 
    console.log(admin-get'); 
    res.send(200); 
}); 

私はCORSノードモジュールは述べて以来、私は飛行前のリクエストを処理する必要があるだろう期待していました複雑なCORSリクエストは、GET/HEAD/POST(DELETEなど)以外のHTTP動詞を使用するか、カスタムヘッダーを使用するリクエストです。

私はイオンのAppとノードエクスプレスアプリケーションはhttpの代わりにhttpsのアドレスを使用するように再構成します。

イオンのApp側:

RestangularProvider.setBaseUrl('https://11.22.33.44:3000'); 

// custom header 
interceptors.serialNumber = function (element, operation, what, url, headers, query) { 
    return { 
    headers: angular.extend({ 
     'x-serialnumber': deviceStore.serialNumber 
    }, headers) 
    }; 
}; 

Restangular.one(‘Admin’).get() 
.then(function (data) { 
    console.log(data); 
    }, function (error) { 
    console.log(error); 
}); 

ノードエクスプレスアプリケーション側:

var app = express(); 
app.use(cors()); 
app.get('/Admin, function(req, res) { 
    console.log(admin-get'); 
    res.send(200); 
}); 

Ionic AppがGETリクエストを実行すると、Chromeデバッガの[ネットワーク]に、OPTIONSリクエストがキャンセルされてリクエストのステータスが表示されます。これは、ノードエクスプレスアプリケーションのサイドでコルプレプロを有効にする必要があることを示しています(ただし、サーバーがhttpsの代わりにhttpで構成されているときにこのエラーが表示されませんでした)。

だから私は、エクスプレスJS CORSモジュールのドキュメントあたりのノードエクスプレスアプリケーション側で以下を試してみました:

app.options('Admin', cors()); // enable pre-flight request 
app.get('/Admin', cors(), function(req, res) { 
    console.log('admin-get'); 
    res.send(200); 
}); 

私は「ネットワーク」の下のクロムデバッガで同じものを参照してください - キャンセルしますOPTIONS要求(リクエストのステータス)。私も試しました

app.options('*', cors()); 

同じ結果です。

次に、Ionic App側でカスタムヘッダー(x-serialnumber)の挿入を削除しました。今すぐ動作します。

Iome App側にカスタムヘッダーが挿入されているために期待されるフライト前のリクエストを処理せずに、httpアドレスでNode Expressアプリケーションを設定すると、なぜ動作しますか?

Node Expressアプリケーションにhttpsアドレス(およびIonicアプリケーション側)が設定されていると、なぜOPTIONSリクエストを処理しないのですか?私はcorsを正しく構成していないのですか?私は何が欠けていますか?

httpsアドレス用に設定されていて、Ionic App側でカスタムヘッダーを削除することができるので、それは問題であると思います。

これを行うには何が必要ですか?

UPDATE

私は角JSの$ HTTPの代わりRestangularを使用してみました。私はどこOPTIONS要求に続いて、最初にGET(マイナスカスタムヘッダー)が出て行くと、私は良い反応(200)を取得クロームネットワークデバッガで見る

$http({ 
    method: 'GET', 
    url: theUrl 
}).then(function successCallback(response) { 
    $http({ 
    method: 'GET', 
    url: theUrl, 
    headers: { 
     'x-serialnumber' : deviceStore.serialNumber 
    } 
    }).then(function successCallback(response) { 
    }, function errorCallback(response) { 
    }); 
}, function errorCallback(response) { 
}); 

:私は作品次の結果を得ました私はまた、良い応答(200)、それにカスタムヘッダー(良い応答を得る)で良いGETに続いて取得します。

私が行う場合NOTこの最初のGETリクエストからカスタムヘッダーを差し引いたOPTIONSリクエストはAngular JS Ionic App側でステータス-1で異常終了します。

注:私はRestangular要求(マイナスカスタムヘッダー)の初期の$ httpリクエスト(マイナスカスタムヘッダーを)出て変更することができます

なぜ、この初期GETマイナスに必要なカスタムヘッダ(つまり、GET(マイナスですカスタムヘッダー)|オプション| GET(カスタムヘッダー付き))?

私は何を理解していませんか?

$http({ 
    method: 'GET', 
    url: 'https://example.com/DUMMY' 
}).then(function successCallback(response) { 
    $http({ 
    method: 'GET', 
    url: 'https://example.com', 
    headers: { 
     'x-serialnumber': deviceStore.serialNumber 
    } 
    }).then(function successCallback(response) { 
    console.log('SUCCESS'); 
    }, function errorCallback(response) { 
    console.log('FAILURE'); 
    }); 
}, function errorCallback(response) { 
    console.log('FAILURE'); 
}); 

は本質的に、私はNOカスタムヘッダーと「予備」GETリクエストを送信するために必要な:

答えて

0

は私が行うために必要なものまあは、以下の通りでした。 GET要求は、私のノードエクスプレスサーバー上のものにすることができます。この "予備"のGETリクエストの後、カスタムヘッダーを含むGETリクエストを実行できます。

具体的にサーバー側で私は以下を参照してください - ステータスコード= -1この「予備は」要求を取得行わず

GET /DUMMY 200 10ms - 2b 
OPTIONS/204 1ms 
GET/200 13ms - 1.03kb 

を、私のイオンAppのOPTIONS要求は、中止だろう - 通常、リクエストが中止され、Ionic App側から離れることはありません。

私はまだこの "予備" GET要求が必要な理由を理解できませんが、これは私のために働きます。

関連する問題