使用Fetch API获取JSON数据遇状态0错误及作者数据展示问题

一、HTTP状态码0错误的原因与修复 #

错误原因 #

你在fetch请求中设置了mode: 'no-cors'，这个模式下浏览器会创建不透明响应（opaque response），无法读取响应状态码、响应头或响应内容，导致代码中response.ok判断失效，抛出状态码为0的错误。而Postman作为非浏览器端工具，不受同源策略限制，所以能正常请求。

修复步骤 #

1. 移除fetch配置中的mode: 'no-cors'选项，让请求使用默认的cors模式。
2. 确保后端服务（localhost:8000）配置CORS允许前端域名访问：
   • 如果是Node.js/Express后端，安装并启用cors中间件；
   • 如果是静态文件服务器（比如http-server），启动时添加--cors参数；
   • 其他后端框架参考对应的CORS配置文档。

二、作者数据展示的错误修正 #

现有代码问题 #

• map循环时错误解构了{data}，但JSON中actualData.data是包含作者信息的对象数组，每个元素直接包含author属性，不需要解构data。
• 键值和属性访问逻辑错误，导致无法正确读取作者数据。

修正后的完整代码 #

import "./Feedback.css";
import { useState, useEffect } from "react";

export default function Feedback() {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetch('http://localhost:8000/') // 移除no-cors模式
            .then((response) => {
                if (!response.ok) {
                    throw new Error(
                        `This is an HTTP error: The status is ${response.status}`
                    );
                }
                return response.json();
            })
            .then((actualData) => {
                setData(actualData.data);
                setError(null);
            })
            .catch((err) => {
                setError(err.message);
                setData([]);
            })
            .finally(() => {
                setLoading(false);
            });
    }, []);

    return (
        <div className="Feedback">
            <h1>Feedback List</h1>
            {loading && <div>A moment please...</div>}
            {error && (
                <div>{`There is a problem fetching the data - ${error}`}</div>
            )}
            <ul>
                {/* 直接遍历data数组，每个元素是包含author的对象 */}
                {data.length > 0 &&
                    data.map((item) => (
                        <li key={item.author.id}>
                            <h3>{item.author.username}</h3>
                            <p>{item.author.email}</p>
                            <p>{item.author.about_me}</p>
                            <img src={item.author.avatar_url} alt={item.author.username} />
                            <p>首次访问：{item.author.first_seen}</p>
                            <p>最后访问：{item.author.last_seen}</p>
                        </li>
                    ))}
                {/* 处理数据为空的情况 */}
                {!loading && data.length === 0 && !error && <div>暂无作者数据</div>}
            </ul>
        </div>
    );
}

关键修改点 #

1. 移除fetch中的mode: 'no-cors'配置；
2. map循环时直接使用数组元素item，通过item.author访问作者的所有属性；
3. 添加了数据为空时的提示，优化用户体验；
4. 展示了作者的全部信息（about_me、头像、访问时间等），你可以根据需求调整展示内容。

内容的提问来源于stack exchange，提问作者eraser