获取用户帖子时出现Can't set headers after they are sent错误

你触发的Can't set headers after they are sent to the client是典型的后端接口重复发送HTTP响应导致的错误。
问题出在后端getUserById控制器的分支逻辑：当查询不到对应用户、!userPosts判断成立时，代码执行了res.status(404).json()返回404响应，但没有终止函数执行，后续代码会继续运行，再次执行res.status(200).json()尝试返回200响应。此时HTTP响应头已经在第一次返回时发送给客户端，第二次尝试设置响应头就会抛出该错误。
另外原控制器逻辑还有两个隐藏问题：

• 数据库查询抛出异常时，catch块只打印错误，没有返回响应，会导致请求挂起
• 所有分支的响应前都没有加return阻断逻辑，很容易出现重复返回的问题

1. 修正后端控制器逻辑 #

所有响应分支前加return，确保返回响应后立刻终止函数执行，同时补全数据库查询异常的响应处理：

export const getUserById = async (req, res) => {
    const userId = req.params.id;
    let userPosts;
    try {
        userPosts = await User.findById(userId).populate("posts");
    } catch (error) {
        console.log(error)
        return res.status(500).json({ message: "Failed to fetch user posts" })
    }
    if (!userPosts) {
        return res.status(404).json({ message: "No Post Found" })
    }
    return res.status(200).json({ user: userPosts })
}

2. 补全前端请求的错误兜底 #

原前端请求逻辑中，如果接口报错走了catch分支，res会是undefined，后续读取res.data会触发前端JS报错，调整请求逻辑增加兜底：

const UserPosts = () => {
    const [user, setUser] = useState()

    useEffect(() => {
        const id = localStorage.getItem("userId");
        const sendRequest = async () => {
            try {
                const res = await axios.get(`/post/user/${id}`)
                const data = res.data;
                console.log(data)
                return data;
            } catch (error) {
                console.log(error)
                return { user: null }
            }
        }

        sendRequest()
            .then((data) => {
                setUser(data.user)
                console.log(data)
            })
    }, [])


    return (
        <div>
            {user &&
                user.posts.map((post, index) => (
                    <Post
                        id={post._id}
                        isUser={true}
                        key={index}
                        username={user.username}
                        caption={post.caption}
                        selectedFile={post.selectedFile}
                        createAt={post.createAt}
                    />
                )).reverse()}
        </div>
    )
}

export default UserPosts;

• 服务端报错：
  
• 客户端报错：
  

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