React从.env获取baseUrl连接Express后端报错原因排查

这个错误的核心原因是：使用.env中的REACT_APP_BASE_URL时，请求地址无效，后端返回了HTML页面（比如404错误页），但代码尝试把HTML解析成JSON，导致语法报错。

具体排查和解决步骤如下：

1. .env文件格式不符合React要求 #

你的.env文件写法有问题：

REACT_APP_BASE_URL = "http://localhost:4000/api/v1"

React读取.env变量时，变量名和值之间不能有空格，值也不能加双引号/单引号，否则会把空格和引号一并包含到URL里，导致请求地址变成"http://localhost:4000/api/v1"/get，这显然是无效地址，后端返回404 HTML。

正确格式应该是：

REACT_APP_BASE_URL=http://localhost:4000/api/v1

2. 必须重启React开发服务器 #

React只会在项目启动时读取.env文件，修改.env后必须重启你的React项目，否则新的变量值不会生效。

3. 验证变量是否正确加载 #

在getTasks函数里添加打印，确认变量值是否正确：

const getTasks = async () => {
  try{
    console.log('当前baseUrl:', process.env.REACT_APP_BASE_URL); // 新增这行验证
    const res = await fetch(`${process.env.REACT_APP_BASE_URL}/get`)
    const data = await res.json();
    console.log(data)
    setTasks(data.data)
  }
  catch(error){
    console.log(error)
  }
}

如果打印结果是undefined或带引号的字符串，说明.env配置未生效。

4. 对比constant.js的正确URL #

你之前用constant.js里的baseUrl能正常请求，把它的值和.env里的内容对比，确保两者完全一致，没有拼写错误（比如端口号、/api/v1路径是否正确）。

补充说明 #

请求返回HTML通常是以下场景：

• 请求地址错误，后端返回404页面
• 前端代理配置错误（如果使用了代理）
• 后端路由路径不匹配，返回默认HTML页面

按上述步骤排查，基本可以解决问题。

内容的提问来源于stack exchange，提问作者Bharath Gowda