Holen GET-Anforderung mit benutzerdefiniertem Header ReactJS

Ich bin versucht, senden Sie eine GET-Anforderung an eine API, aber wenn ich eigene Header im code etwas merkwürdiges passiert.
Irgendwo die request-Methode änderungen an OPTIONEN, wenn es erreicht den web-server.

Aber wenn ich das gleiche tun, ohne Header es wird ein GET-Typ.
Wenn ich die Anwendung Briefträger (API-Entwicklungs-tool) die Anfrage funktioniert!

Anfrage code:

JS:

    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
    })

HTML:

<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>

Server-log-Ausgang (mit Header):

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" "-"

Server-log-Ausgabe (ohne Header):

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" "-"

Hinzugefügt, die NPM-Module für die hol-Unterstützung für zusätzliche Browser:

https://github.com/github/fetch#obtaining-the-response-url

https://github.com/taylorhakes/promise-polyfill

Was vermisse ich hier? Es sieht alles korrekt zu mir.

Ich bin mit firefox-Entwicklung-edition zu testen, die Reactjs app, indem Sie es mit NPM start

InformationsquelleAutor Steven Bakker | 2017-03-17
  1. 1

    Werden Sie wahrscheinlich wollen, installieren Sie die cors npm-Paket https://www.npmjs.com/package/cors auf dem server, wo Sie Ihre http://localhost:8080/api/app Knoten-app läuft.

    https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests hat details über das, was hier passiert: Ihr appID und authorizationkey request-Header auslösen, Ihren browser zu senden CORS preflight OPTIONS Anfrage vor dem senden der GET.

    Umgehen, dass OPTIONS Anfrage, die Sie installieren können, die cors npm-Paket und Folgen Sie den Anweisungen auf https://www.npmjs.com/package/cors#enabling-cors-pre-flight zu konfigurieren:

    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');
});
    InformationsquelleAutor sideshowbarker
  2. 3

    Akzeptierten Antwort-Spiel mir die Lösung, ich bin nicht mit einem nodeJS-backend aber nur Nginx mit php-fpm.

    Aber die Antwort wird erläutert, wie eine Anforderung mit benutzerdefinierten header-wil immer zuerst eine OPTIONS-Anfrage, um zu überprüfen, die Annahme der set-header-Namen, also musste ich ändern, um die Reaktion in den webserver zu geben, ein 204-code wieder mit te-rechts-Header enthalten.
    ohne Sie treffen würde, mein PHP-code, wo die Authentifizierung fehl und führen zu einem 403-code wegen der Abwesenheit der Header mit dem content-und request-Methode verwendet.

    Dies ist, was ich Hinzugefügt, um die Nginx-host zu machen, damit es funktioniert:

    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;
             }
}

    Ich weiß, dass Ihr weit von perfekt, aber für jetzt ist es aus, es funktioniert. und nochmal vielen Dank für den Hinweis mich in die richtige Richtung.

    InformationsquelleAutor Steven Bakker
Schreibe einen Kommentar