反应过来取给出了一个空的响应体

Question

我有一个反应/终极版的应用程序，我试图做一个简单的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浏览器开发工具：

Answer 1

我只是碰到了这一点。正如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); 
    }); 
    } 
}); 

Answer 2

必须读取响应的身体：

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

Answer 3

您需要将您的response转换为json，然后才能访问response.body

从docs

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

Answer 4

尝试使用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); }); 

Answer 5

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

这对我的作品。