Pobranie żądania GET za pomocą niestandardowych nagłówków ReactJS

Question

Próbuję wysłać żądanie GET do interfejsu API, ale gdy dodaję niestandardowe nagłówki do kodu, dzieje się coś dziwnego. Gdzieś, gdy metoda żądania zmienia się na OPCJE po dojściu do serwera WWW.

Ale kiedy zrobię to samo bez nagłówków, będzie to typ GET. Kiedy korzystam z listonosza aplikacji (narzędzie do programowania interfejsu API), żądanie działa poprawnie!

code request:

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>

log serwera ouput (z nagłówkami):

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

wyjście log serwera (bez nagłówków):

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

Dodano modułów KMP do pobrania wsparcie w dodatkowych przeglądarek:
https://github.com/github/fetch#obtaining-the-response-url
https://github.com/taylorhakes/promise-polyfill

Co ja tu brakuje? Dla mnie wszystko wygląda poprawnie.

używam firefox edycję rozwoju przetestować aplikację Reactjs uruchamiając go z KMP rozpocząć

Answer 1

Prawdopodobnie chcesz zainstalować pakiet corshttps://www.npmjs.com/package/cors npm na serwerze, gdzie masz swój http://localhost:8080/api/app węzła działających aplikacji.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests zawiera szczegółowe informacje na temat tego, co się dzieje tutaj: Twoje nagłówki żądania appID i authorizationkey powodują przeglądarkę wysłać CORS inspekcji wstępnej OPTIONS żądania przed wysłaniem GET.

do obsługi tego OPTIONS żądanie, można zainstalować pakiet cors npm i postępuj zgodnie z instrukcjami wyświetlanymi na https://www.npmjs.com/package/cors#enabling-cors-pre-flight go skonfigurować:

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

Przyjęty gra mi odpowiedź rozwiązanie, nie używam backend nodeJS ale zwykły Nginx z php-fpm.

Ale odpowiedź wyjaśnia, w jaki sposób żądanie z niestandardowym nagłówkiem zawsze najpierw wykona żądanie OPTIONS, aby zweryfikować akceptację nazw nagłówków zestawu, więc musiałem zmienić odpowiedź na serwerze internetowym, aby dać kod 204 z powrotem z prawdą nagłówki włączone. bez niego uderzyłby w mój kod PHP, w którym uwierzytelnienie zakończyłoby się niepowodzeniem i skutkowało kodem 403 z powodu braku nagłówków z zastosowaną metodą content i request.

To właśnie dodany do hosta Nginx, aby to działało:

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

wiem, że jego dalekie od doskonałości, ale na razie to sprawiło, że działa. i jeszcze raz dziękuję za wskazanie mi właściwego kierunku.