在React中嘗試對Harvest API進行身份驗證時出現錯誤請求（400）

Question

因此，我正在為辦公室內部的開發人員建立狀態板供內部使用。 它將顯示提交次數，跟蹤的小時數等。

我正在遵循此模型進行身份驗證。 用戶通過Harvest登錄后，會將他們重定向到應用程序，並使用代碼param作為查詢字符串，然后我將該查詢字符串傳遞給一個狀態，然后進行提取以獲取訪問令牌（這樣我稍后可以提取API數據）。

發生的情況是登錄成功，但是當您重定向回應用程序時，訪存將引發錯誤請求（400）錯誤。 我已經在Postman中進行了測試，可以得到正確的答復，所以我不確定問題是什么...

這是Main組件中的一些JS，用於設置是否存在代碼參數的狀態：

harvestState() {

// grab URL params
let urlParams = queryString.parse(location.search);
console.log(urlParams);
console.log(urlParams.code);

// set the state based on the paramater passed back
urlParams.code ? (
  this.setState({
    harvestcode: urlParams.code
  })
) : (
  this.setState({
    harvestcode: 'none'
  })
);
}

componentWillMount(){
  this.harvestState();
}

這是我的Harvest組件中的訪存函數：

  getHarvest(){
    const clientSecret = 'XXXXXXXXXX';
    // Set Harvest Headers
   const harvestHeaders = {
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded',
     },
    method: 'POST',
    mode: 'no-cors',
    body: {
      'code': this.props.code,
      'client_id': this.props.clientid,
      'client_secret': clientSecret,
      'redirect_uri': 'http://dash.mycompany.me',
      'grant_type': 'authorization_code'
    }
   };

   fetch('https://mycompany.harvestapp.com/oauth2/token', harvestHeaders)
   .then( response => response.json() )
   .then( token => {

     console.log(token);

   } )
  }

  componentDidMount(){
    if( this.props.code !== 'none' ){
      this.getHarvest();
    }
  }

我在這里做錯什么了嗎？ 為什么總是返回錯誤請求？ 任何幫助，將不勝感激。 謝謝！

Answer 1

至少有一個問題是，當您使用mode: 'no-cors'您告訴瀏覽器將響應作為不透明的響應來處理，這意味着您正在告訴瀏覽器不要對響應進行任何屬性可從JavaScript訪問的對象。

因此，如果您設置mode: 'no-cors'請求，則response => response.json()將失敗。

在實踐中， no-cors操作的唯一目的是與Service no-cors結合使用，當您僅從響應中緩存資源（例如圖像）時，無需獲取響應的屬性。

無論如何，假設在您的部署中發出請求的客戶端Web應用程序是從與請求發送到的服務器不同的來源運行的，除非服務器使用必要的CORS標頭做出響應，否則瀏覽器將阻止請求-Access Access-Control-Allow-Origin 。 有關說明，請參見MDN文章HTTP訪問控制（CORS） 。

也就是說，瀏覽器會阻止從JavaScript發出的跨域請求，除非將請求發送到服務器的服務器選擇加入以允許使用Access-Control-Allow-Origin等響應標頭。 Postman不會阻止此類請求的原因是Postman不是在Web上某個特定來源運行的任意Web應用程序，而是故意安裝的瀏覽器插件。 因此，它不受瀏覽器對Web應用程序實施的跨域限制的約束。