VUE项目从本地json-server拉取数据时返回异常XHR响应如何解决

云原生阿岚

2026-10-6

问题排查指南

首先你看到的XHR finished loading: GET "http://myIP:8080/sockjs-node/info?t=xxx"是Vue开发环境热重载功能的默认请求日志，不属于你调用fetchTasks接口的响应，无需关注该日志，按以下步骤排查实际接口问题：

步骤1：验证json-server服务可用性

直接在浏览器地址栏访问http://localhost:5000/tasks，确认是否能返回预期的任务列表数据：

若无法访问：检查json-server是否正常启动，启动端口是否为5000，db.json配置文件中是否存在tasks根节点
若能正常返回数据：继续向下排查

步骤2：检查跨域配置

打开浏览器控制台「网络」面板，筛选Fetch/XHR类型，找到目标请求http://localhost:5000/tasks，若请求报CORS跨域错误，启动json-server时添加cors参数即可：

json-server --watch db.json --port 5000 --cors

步骤3：补充代码异常捕获

你的现有代码未做错误处理，无法定位请求失败原因，调整代码如下：

async fetchTasks() {
  try {
    const res = await fetch("http://localhost:5000/tasks");
    // 校验HTTP响应状态
    if (!res.ok) {
      throw new Error(`接口请求失败，状态码：${res.status}`);
    }
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('拉取任务列表失败：', err);
    return [];
  }
},
async created() {
  this.tasks = await this.fetchTasks();
}

调整后重启项目，查看控制台打印的错误信息即可定位具体问题。