Uncaught (in promise) SyntaxError: Unexpected token ‘＜‘, “＜!DOCTYPE “... is not valid JSON

问题描述

测试request拦截器时，出现以下报错：

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

如果使用：

baseURL: 'http://localhost:8080',

不会报错，但我想要做成动态的。

所以在后端做了请求地址，并将地址改为：

baseURL: import.meta.env.VITE_BASE_URL,  // 获取后端配置的动态请求地址

这时，出现报错。

---

原因分析：

这个错误信息表明，代码试图解析一个 JSON 格式的数据，但实际接收到的内容却是 HTML 或其他非 JSON 格式的文本。

导致错误的可能原因有：

1. 1.请求的 API 地址错误：

   • 可能请求了一个错误的 URL，服务器返回了一个 HTML 页面（例如 404 页面）而不是 JSON 数据。

2. 2.服务器端配置问题：

   • 服务器可能没有正确处理请求，返回了错误的响应（例如默认的 HTML 页面）。

3. 3.前端代码问题：

   • 可能在代码中错误地解析了响应数据。例如，使用了 JSON.parse() 来解析非 JSON 格式的数据。

4. 4.网络代理或缓存问题：

   • 如果你使用了代理或缓存，可能会导致返回了错误的响应。

上网找了一堆解决方法，发现都不能解决这个报错。最后突然发现在配置动态地址的时候将文件名打错了！！！ 

以下为去deepseek询问“为什么打错文件名会报错”的结果：

.env.development 并不是固定文件名，但它是开发环境中常用的命名约定。通常，.env 文件会根据不同的环境进行命名，例如：

• .env.development：开发环境

• .env.production：生产环境

• .env.test：测试环境

这些文件名的命名是约定俗成的，便于工具和框架识别和加载对应的环境变量。

如果把文件名打错，工具或框架可能无法正确识别这是开发环境的配置文件，导致无法加载相应的环境变量，从而引发错误。

---

解决方案：

将文件名改为.env.development。