React应用fetch请求API返回index.html报Unexpected token <错误如何解决

这个错误本质是fetch拿到的响应为HTML格式（开头字符为<），而非预期的JSON，结合你返回的是React应用index.html的情况，常见原因如下：

• 路径匹配错误触发SPA fallback #

  React开发服务器（Create React App、Vite等默认配置）为了支持前端路由，会把所有未匹配到静态资源、代理规则的请求，全部fallback返回index.html。如果你调用fetch时写的是相对路径而非完整的API绝对路径，请求会直接打到本地React开发服务器，没有匹配到对应规则就会返回index.html。

• 开发代理配置错误 #

  如果你配置了本地代理转发API请求，可能是代理规则匹配错误、目标地址填写错误、路径重写规则有误，导致请求没有正确转发到目标API服务，最终被本地开发服务器返回了index.html。

• API鉴权失败返回跳转 #

  你直接在浏览器地址栏访问API时，浏览器会自动带上目标API域名下的cookie等鉴权凭据，所以可以正常拿到数据。但fetch请求默认不会携带跨域凭据，如果API需要登录态，会返回302跳转到登录页，登录页的HTML内容就会导致JSON解析失败。

• API返回错误页面 #

  API对请求头、请求方法有校验要求，fetch请求的头（比如Accept、Referer）、请求方法和浏览器地址栏直接访问的不一致时，API会返回401/404/500等错误页面，这类页面也是HTML格式。

排查方案 #

• 先查看DevTools网络面板中该fetch请求的Request URL，确认是否和你预期的API地址一致，如果显示为本地React服务地址（如http://localhost:3000/xxx），优先修改为完整的API绝对路径，或调整本地代理规则。
• 查看请求的响应状态码，如果是301/302跳转，可在fetch配置中添加credentials: 'include'携带鉴权凭据。
• 对比浏览器地址栏直接访问API的请求头和fetch请求头的差异，补充Accept: application/json等必要请求头，确保API返回JSON格式数据。

内容的提问来源于stack exchange，提问作者Justin Christopher Domingo