取自定義標題的GET請求ReactJS

我想向API發送GET請求，但是當我在代碼中添加自定義標頭時，發生了奇怪的事情。請求方法在到達Web服務器時變爲OPTIONS的某處。取自定義標題的GET請求ReactJS

但是，當我做同樣沒有標題它將是一個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>

服務器日誌輸出中（帶有報頭）：

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

我失去的是什麼？這一切對我來說都是正確的。

我使用Firefox開發版與NPM運行它來測試Reactjs應用程序啓動

來源

2017-03-17 Steven Bakker

檢查了一下..我幾乎可以肯定它與CORS有關：http：// stackoverflow。COM /問題/ 27915191 /如何 - 做最鉻瀏覽器的決定，當以發送選項 –

你可能想，你有你的http://localhost:8080/api/app節點的應用程序運行在服務器上安裝cors NPM包https://www.npmjs.com/package/cors。

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

來源

2017-03-17 18:00:01 sideshowbarker

接受的答案遊戲我的解決方案，我沒有使用的NodeJS後端但純淨的Nginx與php-fpm。

但是，答案解釋瞭如何使用自定義標頭的請求始終首先執行OPTIONS請求來驗證設置標頭名稱的接受情況，因此我必須更改Web服務器中的響應以使代碼返回204包括標題。沒有它會打我的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; 
      } 
}

我知道它遠非完美，但現在它做它的工作。再次感謝您指引我進入正確的方向。

來源

2017-03-21 07:24:13

取自定義標題的GET請求ReactJS

回答

相關問題