React无法展示.NET Core WebAPI数据，报JSON解析错误如何解决？

问题根因 #

报错Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0的本质是：前端请求接口后拿到的返回值不是JSON格式，而是HTML内容（HTML代码以<开头），调用response.json()尝试把HTML解析为JSON就会触发该错误。

第一步：修正.env配置错误（最高概率问题） #

你当前的环境变量配置写错了：

# 错误写法：多了一个http:前缀
REACT_APP_API=http:http://localhost:5000/api/

修正为：

# 正确写法
REACT_APP_API=http://localhost:5000/api/

注意：修改.env文件后必须重启React项目，新的配置才会生效。

第二步：其他常见问题排查 #

如果修正配置后问题仍然存在，按以下顺序排查：

• 检查.NET Core WebAPI的跨域配置：Postman请求不受浏览器跨域策略限制，所以可以正常拿到数据，但浏览器端请求会被跨域策略拦截。需要在.NET Core的启动配置（Program.cs或Startup.cs）中添加CORS规则，允许React的默认访问地址http://localhost:3000跨域调用接口。
• 添加请求日志定位问题：修改Department.js的refreshList方法，先打印请求地址和返回原始内容，确认请求是否符合预期：

refreshList(){
    const requestUrl = process.env.REACT_APP_API + 'department'
    // 先打印最终请求地址，确认拼接是否正确
    console.log('实际请求地址：', requestUrl)
    fetch(requestUrl)
    .then(response=>{
        console.log('接口返回状态码：', response.status)
        // 先把返回值转成文本，查看实际返回内容
        return response.text()
    })
    .then(rawText=>{
        console.log('接口返回原始内容：', rawText)
        // 确认内容是JSON后再解析
        try {
            const deptData = JSON.parse(rawText)
            this.setState({deps: deptData})
        } catch(err) {
            console.error('JSON解析失败，返回内容不是合法JSON：', err)
        }
    })
    .catch(err=>console.log('接口请求报错：', err))
}

• 修复无限循环问题：你当前在componentDidUpdate生命周期中直接调用refreshList，而refreshList调用setState后会再次触发componentDidUpdate，会导致接口无限重复请求。可以先暂时删除componentDidUpdate中的refreshList调用，等接口请求正常后再按业务需求调整更新逻辑。

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