カスタムヘッダーを使用してGETリクエストを取得するReactJS

Question

APIにGETリクエストを送信しようとしていますが、コードにカスタムヘッダーを追加すると奇妙なことが起こります。 要求メソッドがWebサーバーに到達すると、OPTIONSに変更されます。

しかし、ヘッダーを付けずに同じことをすると、GETタイプになります。 私はアプリケーションの郵便配達員（API開発ツール）を使用すると、リクエストは正常に機能します。

要求コード：

let token = this.generateClientToken(privateKey, message); 
 

 
    let myheaders = { 
 
     "appID": appID, 
 
     "authorizationkey": token 
 
    } 
 

 
    fetch('http://localhost:8080/api/app/postman', { 
 
     method: "GET", 
 
     // body: JSON.stringify(''), 
 
     headers: myheaders 
 
    }).then(function(response) { 
 
     console.log(response.status);  //=> number 100–599 
 
     console.log(response.statusText); //=> String 
 
     console.log(response.headers); //=> Headers 
 
     console.log(response.url);  //=> String 
 

 
     return response.text() 
 
    }, function(error) { 
 
     console.log(error.message); //=> String 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

サーバーログouputを（ヘッダーを含む）：

worker_1 | 172.18.0.4 - 17/Mar/2017:15:47:44 +0000 "OPTIONS /index.php" 403 
web_1  | 172.18.0.1 - - [17/Mar/2017:15:47:44 +0000] "OPTIONS /api/app/postman HTTP/1.1" 403 5 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0" "-" 

サーバーログ出力（ヘッダなし）：

worker_1 | 172.18.0.4 - 17/Mar/2017:16:01:49 +0000 "GET /index.php" 403 
web_1  | 172.18.0.1 - - [17/Mar/2017:16:01:49 +0000] "GET /api/app/postman HTTP/1.1" 403 5 "http://localhost:3000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0" "-" 

は余分のブラウザでサポートをフェッチするためにNPMモジュールを追加しました：
https://github.com/github/fetch#obtaining-the-response-url
https://github.com/taylorhakes/promise-polyfill

を私はここで何をしないのですか？それはすべて私に見えます。

私はあなたがおそらくあなたはhttp://localhost:8080/api/appノードのアプリを実行しているサーバー上cors NPMパッケージhttps://www.npmjs.com/package/corsをインストールしたい

Answer 1

を開始NPMでそれを実行することによりReactjsアプリをテストするために、Firefoxの開発版を使用しています。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requestsはここに何が起こっているのかについての詳細を持っている：あなたのappIDとauthorizationkeyリクエストヘッダはGETを送信する前にCORSプリフライトOPTIONSリクエストを送信するには、ブラウザをトリガしています。 OPTIONS要求、あなたはcors NPMパッケージをインストールし、それを構成するためにhttps://www.npmjs.com/package/cors#enabling-cors-pre-flightで指示に従うことを処理するには

：

var express = require('express') 
    , cors = require('cors') 
    , app = express(); 
app.options('*', cors()); // include before other routes 
app.listen(80, function(){ 
    console.log('CORS-enabled web server listening on port 80'); 
}); 

Answer 2

受け入れ答えゲーム私は、ソリューション、私はnodeJSバックエンドを使用していないが、 php-fpmのプレーンNginx。

しかし答えは、カスタムヘッダーを持つリクエストが最初にOPTIONSリクエストを行って、設定されたヘッダー名の受け入れを確認する方法を説明しています。したがって、Webサーバーのレスポンスを変更して、ヘッダーが含まれています。 がなければ、PHPコードにヒットせず、認証が失敗し、コンテンツとリクエストメソッドが使用されているヘッダーが存在しないため、403コードになります。

これは、私はそれを動作させるためにnginxのホストに追加するものです。

location ~ \.php$ { 
      add_header 'Access-Control-Allow-Origin' "*"; 
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT'; 
      add_header 'Access-Control-Allow-Headers' 'appID,authorizationkey'; 

      if ($request_method = 'OPTIONS') { 
       return 204; 
      } 
} 

私はその遠い完璧から今のそれが働かせたことを知っています。私は正しい方向に向いてくれてありがとう。