前端调用API获HTML而非JSON及数据非数组问题排查求助

问题1：前端请求返回HTML而非JSON #

Postman能拿到localhost:8080/studySpace的JSON，但前端拿到HTML并报错Data from the API is not an array，核心原因是前端请求的接口路径没打到后端，反而请求了前端自己的服务器，返回了首页HTML。

必查点： #

• 检查SpaceClient.jsx里的请求URL：如果写的是相对路径/studySpace，前端开发服务器（比如默认的5173端口）会拦截这个请求，返回自身的index.html，而非转发到后端8080端口。
• 确认Vite代理配置：没在vite.config.js中配置代理的话，前端请求根本到不了后端。必须添加以下配置：

  server: {
    proxy: {
      '/studySpace': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
  

• 排查路径前缀：如果之前启用过base: '/resevify/'，前端请求会自动加上/resevify前缀，变成/resevify/studySpace，若后端无对应接口，会返回404，随后被前端路由 fallback 为首页HTML。

问题2：取消base: '/resevify/'注释后的新异常 #

这个配置用于设置前端资源的基础路径，取消后出现异常，原因集中在以下几点：

• 接口路径不匹配：若后端接口要求带/resevify前缀，取消配置后前端请求丢失该前缀，直接触发404。
• 静态资源加载失败：图片、CSS等资源的路径会变为/resevify/xxx，但服务器无对应路径的资源，导致加载失败。
• 路由模式冲突：若使用history路由模式，服务器未配置fallback到/resevify/index.html，刷新页面会直接返回404。

针对提供代码文件的具体排查 #

HomePage.jsx #

• 给渲染逻辑加兜底判断：当前返回的是HTML字符串，必然不是数组，需先校验数据类型避免报错：

  if (!Array.isArray(response.data)) {
    console.error('接口返回格式错误：', response.data);
    return <div>加载失败，请检查接口</div>;
  }
  

• 确认调用SpaceClient的方法是否传错参数，比如请求路径是否写错。

SpaceClient.jsx #

• 查看请求URL类型：如果是axios.get('/studySpace')这类相对路径，未配置代理时绝对到不了后端，要么改成绝对路径axios.get('http://localhost:8080/studySpace')，要么配置好代理后再用相对路径。
• 检查请求头：是否添加了Accept: application/json？部分后端会根据该请求头返回对应格式，未添加可能返回HTML。

vite.config.js #

• 若要启用base: '/resevify/'，代理配置需同步调整，去掉前缀后再转发给后端：

  server: {
    proxy: {
      '/resevify/studySpace': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/resevify/, '')
      }
    }
  }
  

• 开发环境无需启用base配置，仅在生产部署到服务器的/resevify目录下时才需要设置。

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