json-server请求返回HTML而非JSON 控制台报Unexpected token <错误求助

问题根本原因 #

你遇到的报错Unexpected token < in JSON at position 0本质是请求地址错误，服务端返回了404页面/React入口HTML文件，你将HTML内容当作JSON解析才触发报错。可按以下步骤逐一排查解决：

第一步：验证json-server运行状态 #

先确认json-server启动配置正确：

• 假设你的JSON数据存在db.json文件中，启动命令必须为 json-server --watch db.json --port 3001
• 启动后直接在浏览器访问http://localhost:3001/articles，如果能正常返回你定义的articles数组JSON内容，说明json-server运行正常；如果返回HTML，说明端口被其他服务占用，或者你启动时指定的JSON文件路径错误。

第二步：修正请求地址配置 #

React和json-server运行在不同端口，请求地址不能写相对路径：

• 调用useFetch钩子时，必须传入完整的请求地址：

  const {data, isDepending, error} = UseFetch({urlParam: 'http://localhost:3001/articles'})
  

  不能只写/articles，否则请求会默认发送到React服务所在的端口（比如3000），返回的是React的HTML入口文件，自然解析失败。
• 如果加了完整地址报跨域错误，启动json-server时加上cors参数即可：json-server --watch db.json --port 3001 --cors
• 可选简化方案：如果你不想每次都写完整地址，在React项目的package.json中新增配置项"proxy": "http://localhost:3001"，重启React服务后，直接请求/articles就会自动转发到json-server的3001端口，不需要额外处理跨域。

第三步：优化useFetch钩子降低排查成本 #

你当前的钩子吞了原始错误信息，不方便定位问题，可按以下方式优化：

import { useEffect, useState } from "react";
function UseFetch({urlParam}){
    const [data,setData] = useState([]);
    const [isDepending,setIsDepending] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        // 空地址不发起请求
        if(!urlParam) return
        async function fetchingData() {
            setIsDepending(true)
            let fetchingProcess
            try{
                fetchingProcess = await fetch(urlParam);
                if(!fetchingProcess.ok){
                    throw new Error(`请求失败，状态码：${fetchingProcess.status}`)
                }
                const jsonData = await fetchingProcess.json();
                setData(jsonData)
                setError(null)
            }catch(e){
                // 打印原始错误和返回内容，方便排查是不是返回了HTML
                console.error('请求错误详情：', e)
                if(fetchingProcess) {
                    const resText = await fetchingProcess.text()
                    console.error('服务端返回的实际内容：', resText)
                }
                setError('sorry request encountred a problem')
            }finally{
                // 不管请求成功失败都关闭加载状态
                setIsDepending(false)
            }
        }
        fetchingData();
    }, [urlParam])

    return {data, isDepending, error};
}
export default UseFetch;

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