錯誤的請求（400）當試圖在React中驗證Harvest API

因此，我正在爲辦公室內的開發人員構建一個供我們內部使用的狀態板。它會顯示提交數量，跟蹤的小時數等。錯誤的請求（400）當試圖在React中驗證Harvest API

我正在關注此model進行身份驗證。在用戶登錄收穫後，它將它們重定向迴應用程序的代碼參數作爲查詢字符串，然後我將該查詢字符串傳遞給一個狀態，然後執行獲取以獲取訪問令牌（這樣我以後可以拉API數據）。

會發生什麼，登錄是否成功，但是當您重定向迴應用程序時，提取會引發錯誤的請求（400）錯誤。我在郵差測試，可以得到正確的響應，所以我不知道是什麼問題...

下面是從設置狀態的主要成分有些JS如果有一個代碼PARAM：

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

這裏是我的收穫成分的提取功能：

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

有一些東西在這裏，我做錯了什麼？爲什麼它總是返回一個錯誤的請求？任何幫助，將不勝感激。謝謝！

來源

2017-02-03 buschschwick

我注意到'mode：'no-cors''，所以客戶端Web應用程序發出的請求運行在與發送請求的服務器相同的源（方案+域+端口）上？ – sideshowbarker

@sideshowbarker不，他們是在不同的服務器上，但沒有使用它，我得到一個控制檯日誌關於打開它得到一個響應... – buschschwick

至少有一個問題是，當您使用mode: 'no-cors'時，您告訴瀏覽器將響應作爲opaque response來處理，這意味着您要告訴瀏覽器不要從響應對象獲取任何屬性JavaScript的。

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

實踐中no-cors的唯一目的是與服務人員結合使用，只需緩存響應中的資源（例如圖像），而無需獲取響應的屬性。

無論如何，考慮到在您的部署中製作請求的客戶端Web應用程序的運行方式與請求發送到的服務器的源不同，瀏覽器將阻止請求，除非服務器使用必要的CORS標頭進行響應 - Access-Control-Allow-Origin，一開始。有關說明，請參閱MDN文章HTTP access control (CORS)。

即，瀏覽器從JavaScript，除非請求被髮送到選擇採用-在服務器中允許那些由塊跨域請求，與Access-Control-Allow-Origin等，響應頭。 Postman不會阻止這種請求的原因是，郵差並不是一個任意Web應用程序，它運行在Web上的某個特定來源，而是您有意安裝的瀏覽器插件。因此，不受限於跨應用程序限制瀏覽器對Web應用程序的強制執行。

來源

2017-02-06 17:30:36 sideshowbarker

是的，我認爲我需要使用CURL而不是與獲取請求。謝謝！ – buschschwick

錯誤的請求（400）當試圖在React中驗證Harvest API

回答

相關問題