React调用TheMealDB接口报SyntaxError: JSON.parse，其他接口正常是什么原因？

核心错误原因 #

• 你定义的API_URL缺少https://协议前缀，浏览器会将无协议的www.开头地址识别为当前React应用域名下的相对路径，最终请求返回的是404错误页的HTML内容，而非接口预期返回的JSON数据，调用response.json()解析HTML内容时就会触发SyntaxError报错。

修复方案 #

将API_URL修改为带协议的完整地址即可，同时建议补充异常捕获逻辑方便后续定位请求类问题，修复后的代码如下：

const API_URL = 'https://www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata';

const getMealRequest = async()=>{
    try {
        const response = await fetch(API_URL)
        // 先校验响应状态是否正常
        if (!response.ok) {
            throw new Error(`接口响应异常，状态码: ${response.status}`)
        }
        const data = await response.json()
        console.log(data)
    } catch (err) {
        console.error('请求处理失败:', err)
    }
}

useEffect(()=>{
    getMealRequest()
},[])

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