本文深入探讨了使用fetch api时如何正确解析服务器返回的json数据，并解决了常见的响应对象为空的误解。我们将详细介绍`response.json()`方法的使用，并阐明`mode: 'no-cors'`选项的局限性，强调在跨域场景下，后端cors配置才是获取可读响应的正确途径，以确保前端能够顺利处理api数据。
在使用JavaScript的Fetch API进行网络请求时，开发者常会遇到一个问题：即使请求成功并收到了服务器响应，但尝试直接访问response对象时，却发现其内容似乎是空的，或者无法直接获取到预期的JSON数据。这通常是由于对Fetch API返回的Response对象及其处理方式存在误解。
理解Fetch API的Response对象
Fetch API返回的Response对象并非直接包含服务器返回的实际数据（如JSON或文本），而是整个HTTP响应的表示。它包含了响应的状态码、头部信息等元数据，但响应体内容需要通过特定的方法才能提取。
开发者常见的错误尝试是直接对response对象进行字符串化或解析，例如：
async function getInfoIncorrect() {
const response = await fetch('https://api.example.com/demo');
// 错误尝试：直接对response对象进行字符串化或解析
const responseString = await response; // 这里的await response并不会得到JSON字符串
const responseObject = await JSON.parse(JSON.stringify(responseString)); // 错误：无法正确解析JSON
console.log(responseString);
console.log(responseObject);
}上述代码中的responseString实际上仍然是Response对象本身，对其进行JSON.stringify()再JSON.parse()并不能提取出响应体中的JSON数据，因为Response对象内部的流式数据并未被处理。
正确获取JSON响应体
要从Response对象中提取JSON响应体，应该使用其内置的json()方法。json()方法会返回一个Promise，该Promise在解析响应体文本为JSON后解析。
以下是正确获取JSON数据的示例：
async function getInfoCorrect() {
try {
const response = await fetch('https://api.example.com/demo');
// 检查HTTP响应状态码，确保请求成功
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 正确方法：使用response.json()解析JSON响应体
const responseObject = await response.json();
console.log(responseObject); // 这里将打印出服务器返回的JSON数据
return responseObject;
} catch (error) {
console.error('Fetch请求失败:', error);
// 根据实际需求处理错误，例如显示错误消息给用户
throw error;
}
}
// 调用示例
getInfoCorrect();注意事项：
- response.json()方法只能调用一次。一旦调用，响应体就被读取完毕。
- 如果服务器返回的不是有效的JSON格式，response.json()方法会抛出错误。在实际应用中，建议结合response.headers.get('Content-Type')来判断响应类型。
- 在await response.json()之前，通常会检查response.ok属性（等同于response.status >= 200 && response.status
理解并正确处理CORS问题
在原问题中，用户尝试使用mode: 'no-cors'来解决CORS（跨域资源共享）问题。然而，mode: 'no-cors'虽然可以使请求成功发送并接收到响应，但它有严格的限制，通常不适用于需要读取响应体的API请求。
当mode: 'no-cors'被启用时，Fetch API会执行一个“不透明请求”（Opaque Request）。这意味着：
- 你无法访问响应的任何头部信息（除了Content-Type），并且response.status始终为0。
- 你无法访问响应体内容。调用response.json()、response.text()等方法将无法获取数据，即使服务器返回了数据。
因此，如果你的前端应用需要读取API返回的数据，不应该使用mode: 'no-cors'来绕过CORS。
解决CORS问题的正确方法是在后端服务器上进行配置，允许你的前端应用的源（Origin）进行跨域请求。这通常通过在后端响应中设置Access-Control-Allow-Origin HTTP头部来实现。
例如，在Express.js后端中，你可以使用cors中间件进行配置：
// 后端服务器示例 (Node.js with Express)
const express = require('express');
const cors = require('cors');
const app = express();
// 允许来自特定源的请求
const corsOptions = {
origin: 'https://your-frontend-domain.com', // 替换为你的前端域名
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
credentials: true, // 如果需要发送cookie等凭证
optionsSuccessStatus: 204 // 对于预检请求的成功状态码
};
app.use(cors(corsOptions));
// 或者，如果允许所有源（不推荐用于生产环境）
// app.use(cors());
app.get('/api/demo', (req, res) => {
res.json({ message: 'Hello from backend!', data: [1, 2, 3] });
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});在前端，一旦后端正确配置了CORS，你就可以移除mode: 'no-cors'，并正常地使用response.json()来获取数据：
async function getInfoWithCORS() {
try {
// 移除 mode: 'no-cors'
const response = await fetch('https://api.example.com/demo');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const responseObject = await response.json();
console.log('从服务器获取的数据:', responseObject);
return responseObject;
} catch (error) {
console.error('Fetch请求或CORS错误:', error);
throw error;
}
}
// 调用示例
getInfoWithCORS();总结
正确使用Fetch API的关键在于理解其异步特性和Response对象的结构。要获取JSON响应体，务必使用response.json()方法。对于跨域请求，解决CORS问题的根本在于后端配置，而非通过mode: 'no-cors'来规避，因为后者会限制前端对响应体的访问。遵循这些最佳实践，可以确保你的前端应用能够稳定可靠地与后端API进行数据交互。
