Create React App项目部署Firebase后，process.env环境变量控制台可正常显示但fetch调用出现JSON解析错误

这问题我之前碰到过好几个类似的案例，核心原因基本都是生产构建时环境变量没有被正确注入，导致Fetch请求的URL错误，最终返回了Firebase托管的HTML页面而非预期的JSON响应，才会出现SyntaxError: Unexpected token < in JSON at position 0这个经典错误（因为HTML的第一个字符就是<）。咱们一步步来排查解决：

1. 先确认生产构建后的环境变量值 #

本地开发时console.log显示正确不代表生产构建后也是对的，create-react-app会在npm run build阶段把环境变量硬编码到JS文件里。你可以打开build文件夹里的主JS文件，搜索REACT_APP_SERVER_URL，看看实际打包进去的值是什么：

• 如果是undefined或者空字符串，那说明构建时根本没读到这个环境变量；
• 如果值里有多余的空格、引号或者其他字符，也会导致URL拼接错误。

对应的解决办法： #

• 确保你在生产构建时用的是.env.production文件（create-react-app默认在生产环境读取这个文件），把REACT_APP_SERVER_URL正确写在这个文件里，不要只放在本地的.env或.env.local里；
• 如果是直接在命令行构建，可以手动注入变量：

  REACT_APP_SERVER_URL=https://serverapi.com/ npm run build
  

  再把build文件夹部署到Firebase。

2. 检查Firebase部署的构建流程 #

如果你是用Firebase Hosting的自动构建功能（比如关联GitHub仓库自动构建部署），那本地的.env文件不会被传到构建环境里，你需要在Firebase控制台配置生产环境变量：

1. 打开Firebase控制台，进入你的项目；
2. 转到项目设置 -> 环境变量；
3. 添加REACT_APP_SERVER_URL变量，值填你的服务器URL；
4. 重新触发一次构建部署，确保环境变量被正确注入到生产构建中。

3. 处理URL拼接的潜在问题 #

有时候环境变量可能不小心带了多余的空格（比如.env里写的是REACT_APP_SERVER_URL=https://serverapi.com ，末尾多了个空格），本地console.log可能看不出来，但拼接后URL就会出错。可以在代码里给环境变量加个trim()处理：

fetch(`${process.env.REACT_APP_SERVER_URL.trim()}/`, { 
    mode:"cors", 
    credentials:"include", 
    method:"GET", 
    headers: { 
        Accept:"application/json", 
        "Content-Type":"application/json" 
    } 
})

4. 确认Firebase Hosting的重写规则 #

如果你的firebase.json里有重写规则把所有请求都指向index.html（这是单页应用的常见配置），要确保API请求不会被错误拦截。比如可以在重写规则里优先匹配API请求：

{
  "hosting": {
    "public": "build",
    "rewrites": [
      // 优先转发API请求到你的服务器
      {
        "source": "/**",
        "destination": "https://serverapi.com/$1"
      },
      // 剩下的请求都指向index.html（单页应用路由用）
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

不过你说硬编码URL就正常，这个大概率不是主要原因，但可以作为兜底排查项。

按照上面的步骤排查，基本就能解决问题了。

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