Study Notion平台Axios网络错误求助：npm start启动前端时异常

报错信息 #

Uncaught runtime errors:
×
ERROR
Network Error
AxiosError: Network Error
    at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:476728:14)
    at Axios.request (http://localhost:3000/static/js/bundle.js:477169:41)
    at async http://localhost:3000/static/js/bundle.js:2232:11

场景还原 #

开发Study Notion教育平台时，npm run dev启动无报错，但单独执行前端npm start会触发上述Axios网络错误，已尝试更新Axios版本无效。

排查与解决步骤 #

1. 核对API端点的环境配置 #

ratingsEndpoints.REVIEWS_DETAILS_API在开发环境可能通过代理指向后端，但生产环境（npm start启动的通常是构建后的生产服务）需要直接访问真实API地址。检查：

• 生产环境的环境变量文件（如.env.production）中，API基础地址是否正确配置
• ratingsEndpoints里的REVIEWS_DETAILS_API是否拼接了正确的生产环境域名

2. 检查代理配置的生效范围 #

开发环境常用的代理配置（如create-react-app的setupProxy.js、Vite的server.proxy）仅在npm run dev时生效，生产环境不会自动继承。解决方式：

• 后端服务配置CORS允许前端生产域名访问
• 前端直接使用带完整域名的API地址，避免相对路径导致的跨域或地址错误

3. 给Axios请求添加错误捕获 #

当前代码未处理请求异常，无法定位具体错误原因。修改ReviewSlider组件中的请求逻辑：

useEffect(() => {
  ;(async () => {
    try {
      const { data } = await apiConnector(
        "GET",
        ratingsEndpoints.REVIEWS_DETAILS_API
      )
      if (data?.success) {
        setReviews(data?.data)
      }
    } catch (error) {
      // 打印详细错误信息，帮助定位问题
      console.error("评论数据请求失败:", error.response?.data || error.message)
      console.error("请求地址:", ratingsEndpoints.REVIEWS_DETAILS_API)
    }
  })()
}, [])

通过控制台输出的错误详情，能快速判断是API地址不存在、CORS拦截还是网络连通性问题。

4. 验证生产环境的网络连通性 #

确认前端部署环境（本地生产服务或服务器）能正常访问API地址：

• 在浏览器控制台执行fetch('你的API地址')，查看返回结果
• 检查API服务器是否启动、域名是否解析正确、端口是否对外开放

5. 检查apiConnector的全局配置 #

查看apiConnector工具类中是否设置了环境相关的baseURL：

• 开发环境用相对路径或本地代理地址，生产环境需切换为正式API域名
• 确认Axios实例是否在生产环境中配置了正确的超时、headers等参数

内容的提问来源于stack exchange，提问作者Himanshi Modi