保存到服务器Error: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

### 错误原因 当尝试加载模型时遇到 `SyntaxError: Unexpected token '<'` 的错误表明客户端期望接收到 JSON 数据，但实际上接收到了 HTML 文档。这通常是由于服务器端配置不当或请求路径不正确引起的[^1]。 具体来说，在 AJAX 请求或其他异步调用过程中，如果响应的内容类型不是有效的 JSON 而是类似于带有 DOCTYPE 声明的 HTML 页面，则会触发此类语法错误[^2]。 ### 解决方案 #### 1. 验证 API 终结点 URL 正确无误 确保用于获取数据的 URL 是正确的 RESTful 接口地址而非普通的网页链接。检查是否有拼写错误或者多余的字符存在。 #### 2. 设置正确的 Content-Type 头部信息 确认服务端返回给前端的数据确实是以 application/json 形式的 MIME 类型发送过来的。可以通过浏览器开发者工具中的网络面板查看具体的响应头部字段来验证这一点。 对于 Node.js Express 应用程序而言，可以这样设置： ```javascript app.use((req, res, next) => { res.setHeader('Content-Type', 'application/json'); next(); }); ``` #### 3. 捕获并处理异常情况下的 HTTP 状态码 有时即使指定了正确的路由也可能因为各种原因导致无法正常访问资源（比如数据库连接失败），这时应该考虑如何优雅地应对这些状况而不是简单地抛出未定义的行为。可以在控制器层面上加入 try-catch 结构，并针对不同类型的错误给予相应的提示信息。 例如在 Java Spring Boot 中实现如下逻辑： ```java @GetMapping("/api/model") public ResponseEntity<String> getModel() { try { String jsonData = service.loadModelData(); // 获取模型数据的方法 return new ResponseEntity<>(jsonData, HttpStatus.OK); } catch (Exception e) { logger.error(e.getMessage(), e); // 记录日志以便后续排查问题所在 Map<String, Object> resultMap = Maps.newHashMap(); resultMap.put("code", "-1"); resultMap.put("msg", "系统繁忙，请稍后再试！"); return new ResponseEntity<>(new Gson().toJson(resultMap), HttpStatus.INTERNAL_SERVER_ERROR); } } ``` 通过这种方式能够有效防止因内部错误而导致整个应用程序崩溃的情况发生，同时也提高了用户体验感。 #### 4. 客户端侧增加预检机制 为了避免不必要的通信开销以及提高系统的健壮性，建议在发起任何可能涉及跨域资源共享(CORS)的操作之前先执行一次 OPTIONS 方法询问目标站点是否允许当前源对其进行读取/修改等动作。一旦得知对方愿意配合之后再正式提交 POST 或 PUT 请求上传文件等内容。 另外还可以利用 fetch API 提供的第二个参数 options 来指定更多细节选项，如 credentials 属性控制 cookie 是否随同一起传递过去；mode 参数决定本次交互遵循何种模式等等。 ```javascript fetch('/api/save', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(data), }) .then(response => response.json()) .catch(error => console.log('There was a problem with the fetch operation:', error)); ``` 以上措施可以帮助减少甚至消除由意外输入所引发的一系列连锁反应，从而使得整个流程更加顺畅可靠[^3]。