反應過來取給出了一個空的響應體

我有一個反應/終極版的應用程序，我試圖做一個簡單的GET請求到服務器：反應過來取給出了一個空的響應體

fetch('http://example.com/api/node', { 
    mode: "no-cors", 
    method: "GET", 
    headers: { 
    "Accept": "application/json" 
    } 
}).then((response) => { 
    console.log(response.body); // null 
    return dispatch({ 
    type: "GET_CALL", 
    response: response 
    }); 
}) 
.catch(error => { console.log('request failed', error); });

的問題是，響應主體是空的.then()功能，我不知道爲什麼。我在網上查了一些例子，它看起來像我的代碼應該工作，所以我顯然在這裏失去了一些東西問題是，如果我在Chrome的開發工具中查看網絡選項卡，則發出請求，並收到我正在查找的數據。

任何人都可以照亮這一個嗎？

編輯：

我試圖轉換效應初探。

使用.text()：

fetch('http://example.com/api/node', { 
    mode: "no-cors", 
    method: "GET", 
    headers: { 
    "Accept": "application/json" 
    } 
}) 
.then(response => response.text()) 
.then((response) => { 
    console.log(response); // returns empty string 
    return dispatch({ 
    type: "GET_CALL", 
    response: response 
    }); 
}) 
.catch(error => { console.log('request failed', error); });

與.json()：

fetch('http://example.com/api/node', { 
    mode: "no-cors", 
    method: "GET", 
    headers: { 
    "Accept": "application/json" 
    } 
}) 
.then(response => response.json()) 
.then((response) => { 
    console.log(response.body); 
    return dispatch({ 
    type: "GET_CALL", 
    response: response.body 
    }); 
}) 
.catch(error => { console.log('request failed', error); }); // Syntax error: unexpected end of input

尋找在Chrome瀏覽器開發工具：

來源

2016-04-25 Razvan Ilin

我無法使'fetch'工作，所以我開始使用[redux-api-middleware]（https://github.com/agraboso/redux-api-middleware/）。當你提出請求時，你必須以類似的方式將響應轉換成json： –

我只是碰到了這一點。正如answer中所提到的，使用mode: "no-cors"會給你一個opaque response，它似乎沒有返回正文中的數據。

opaque：對「非Cors」請求對跨源資源的響應。 Severely restricted。

在我的情況我使用的是Express。在我安裝了cors for Express並對其進行配置並刪除了mode: "no-cors"後，我得到了一個承諾。響應數據將符合承諾，例如

fetch('http://example.com/api/node', { 
    // mode: 'no-cors', 
    method: 'GET', 
    headers: { 
    Accept: 'application/json', 
    }, 
}, 
).then(response => { 
    if (response.ok) { 
    response.json().then(json => { 
     console.log(json); 
    }); 
    } 
});

來源

2016-11-04 16:47:27 RationalDev

必須讀取響應的身體：

fetch(url) 
    .then(res => res.text()) // Read the body as a string 

fetch(url) 
    .then(res => res.json()) // Read the body as JSON payload

一旦你讀過的身體，你將能夠操作它：

fetch('http://example.com/api/node', { 
    mode: "no-cors", 
    method: "GET", 
    headers: { 
    "Accept": "application/json" 
    } 
}) 
    .then(response => response.json()) 
    .then(response => { 
    return dispatch({ 
     type: "GET_CALL", 
     response: response 
    }); 
    })

來源

2016-04-25 12:24:14 Florent

感謝您的回答！我嘗試過，但我仍然可以得到正確的迴應。檢查編輯的問題。 –

@RazvanIlin使用'.json（）'而不是'.text（）' – Florent

對不起，我剛剛意識到我在最後一個例子中複製了錯誤的代碼片段。我在那裏實際上使用了'json（）'，但是我得到了Syntax錯誤，我認爲這個錯誤會被解僱，因爲它不能將響應轉換爲json –

您需要將您的response轉換爲json，然後才能訪問response.body

從docs

fetch(url) 
    .then(response => response.json()) 
    .then(json => { 
    console.log('parsed json', json) // access json.body here 
    })

來源

2016-04-25 12:25:32

嘗試使用response.json()：

fetch('http://example.com/api/node', { 
    mode: "no-cors", 
    method: "GET", 
    headers: { 
    "Accept": "application/json" 
    } 
}).then((response) => { 
    console.log(response.json()); // null 
    return dispatch({ 
    type: "GET_CALL", 
    response: response.json() 
    }); 
}) 
.catch(error => { console.log('request failed', error); });

來源

2016-04-25 12:26:05

fetch("http://localhost:8988/api", { 
     //mode: "no-cors", 
     method: "GET", 
     headers: { 
      "Accept": "application/json" 
     } 
    }) 
    .then(response => { 
     return response.json(); 
    }) 
    .then(data => { 
     return data; 
    }) 
    .catch(error => { 
     return error; 
    });

這對我的作品。

來源

2017-03-06 11:51:59

反應過來取給出了一個空的響應體

回答

相關問題