如何在axios中設置用戶名和密碼獲取方法頭

我想在我的react項目中通過axios從服務器獲取一些數據。當我把瀏覽器的網址，並進入瀏覽器問我的用戶名和密碼，然後，我可以看到JSON數據。但我不知道如何在get方法中設置axios頭中的密碼和用戶名。我在很多論壇和網頁上搜索過它，特別是這個鏈接對我沒有幫助：Sending axios get request with authorization header。所以最後我嘗試了（很多事情在此之前，但我更困惑）：如何在axios中設置用戶名和密碼獲取方法頭

componentDidMount() { 
    axios.get('http://my_url/api/stb', {auth: { 
    username: 'usrnm', 
    password: 'pswrd' 
}}) 
    .then(function(response) { 
     console.log(response.data); 
     console.log(response.headers['Authorization']); 
    }).catch(err => console.log(err)); 
}

而我什麼都得不到。我得到這個錯誤控制檯：

Error: Network Error 
Stack trace: 
[email protected]://localhost:3000/static/js/bundle.js:2195:15 
[email protected]://localhost:3000/static/js/bundle.js:1724:14

其實，API文檔提到，用這句話：

如果沒有頁眉或不正確的數據 - 服務器的回答將包含HTTP狀態401未經授權和消息：

< {"status":"ERROR","results":"","error":"401 Unauthorized request"}

對於成功的鑑別是足以在每個請求頭的API補充：

Authorization: Basic <base64encode("login":"password")>

奇怪的是，當我使用郵遞員，響應給我下面的身體部分「401未授權」的響應。但是我在瀏覽器的控制檯中看不到任何401錯誤。

來源

2017-10-04 escalepion

我覺得網址是不是密碼保護api，請確認，或pllease共享api的url –

對不起，我不能分享網址，是的，網址是受保護的，正如我上面提到的，它說我們必須在get方法的頭文件中設置授權。 – escalepion

然後首先你必須登錄，登錄將無需標題訪問，這將返回令牌，通過這個令牌，我們將能夠訪問其他apis –

好吧，我找到了解決方案。正如我在爲我的問題寫的評論中提到的那樣，還有一個Cors問題。我發現cors問題出現，因爲我無法正確授權。所以Cors是我的問題的一個自然結果。無論..我想分享我的解決方案，我希望它可以幫助另一個人，因爲我couldent找到一個明確的授權範例與反應和axios。

我通過NPM安裝基礎-64庫和：

componentDidMount() { 
     const tok = 'my_username:my_password'; 
     const hash = Base64.encode(tok); 
     const Basic = 'Basic ' + hash; 
     axios.get('http://my_url/api/stb', {headers : { 'Authorization' : Basic }}) 
     .then(function(response) { 
      console.log(response.data); 
      console.log(response.headers['Authorization']); 
     }).catch(err => console.log(err)); 
    }

不要忘記獲得授權在單引號和不幾個小時奮鬥像我:)

來源

2017-10-04 19:53:51 escalepion

如何在axios中設置用戶名和密碼獲取方法頭

回答

相關問題