使用useEffect调用API无法获取数据，JSON解析报位置0存在意外<符号

问题原因 #

你遇到的Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0错误，本质是前端请求/api接口时，返回的内容不是预期的JSON格式，而是HTML文档（HTML以<字符开头，解析JSON时第一个字符就不匹配，因此抛出该错误）。
出现该问题的核心原因是：

• 你的React前端开发服务默认运行在3000端口，Node后端服务运行在3001端口
• 直接在前端写fetch("/api")默认会把请求发到前端所在的3000端口，而前端服务没有/api路由，会默认返回首页的HTML内容

解决步骤 #

1. 打开React项目根目录下的package.json文件，添加一行代理配置：

"proxy": "http://localhost:3001"

该配置仅在开发环境生效，会自动把前端无法匹配的请求转发到3001端口的后端服务。
2. 重启React前端开发服务，配置修改后必须重启才会生效
3. 确保两个服务都处于正常运行状态：先启动Node后端服务，再启动React前端服务

验证方法 #

你可以先直接在浏览器地址栏输入http://localhost:3001/api，如果能正常返回{"message": "Hello from server!"}，说明后端接口本身没有问题，按照上面的步骤配置代理即可解决问题。

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