Özel başlıklarla Get GET İsteği ReactJS

Question

API'ye GET isteği göndermeye çalışıyorum ancak kodda özel başlık eklerken garip bir şeyler oluyor. Bir yerde web sunucusuna ulaştığında istek yöntemi OPTIONS olarak değişir.

Ancak, başlık olmadan aynı şeyi yaptığımda, bir GET türü olacaktır. Uygulama postacıyı kullandığımda (API geliştirme aracı) istek iyi çalışıyor!

istek kodu:

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>

Sunucusu günlük çıkışına (başlıkları ile):

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

Sunucusu günlük çıkışı (başlıkları olmadan):

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

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

burada ne eksik: ekstra tarayıcılarda destek getirme için

NPM modüllerini Eklenenler? Her şey bana doğru görünüyor.

Ben NPM ile çalıştırarak Reactjs uygulamasını test etmek için firefox geliştirme sürümünü kullanıyorum Muhtemelen size http://localhost:8080/api/app Düğüm uygulaması çalıştıran varsa sunucuda cors npm paketini https://www.npmjs.com/package/cors yüklemek istediğiniz

Answer 1

başlar. Sizin appID ve authorizationkey istek başlıklarını GET göndermeden önce CORS uçuş öncesi OPTIONS isteği göndermek için tarayıcınızın tetikleyen:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests burada neler ilgili ayrıntıları vardır.

o OPTIONS isteği işlemek için, cors npm paketini yüklemek ve yapılandırmak için https://www.npmjs.com/package/cors#enabling-cors-pre-flight adresindeki talimatları izleyebilirsiniz:

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

kabul cevap oyun bana çözüm, ben bir nodeJS arka uç kullanmıyorum ama php-fpm ile düz Nginx.

Ancak, yanıt, özel üstbilgideki bir isteğin her zaman ilk olarak, set üstbilgi adlarının kabul edildiğini doğrulamak için bir OPTIONS isteğini nasıl yapacağını açıklar, bu yüzden web sunucusundaki yanıtı doğru bir şekilde 204 kodu vermek üzere değiştirmek zorunda kaldım başlıklar dahil. olmadan, PHP kodumu kimlik doğrulama başarısız olur ve kullanılan içerik ve istek yöntemi ile başlıkların yokluğu nedeniyle bir 403 koduyla sonuçlanırdı.

Bu şimdiye çalışması için Nginx ana bilgisayara eklenen şudur:

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

biliyorum ki onun o işe yapılan mükemmel olmaktan uzak ama şimdilik. ve yine beni doğru yöne işaret ettiğin için teşekkürler.