PERN项目构建后报JSON.parse错误，开发模式正常该如何解决？

1. 优先排查请求地址硬编码问题 #

你当前前端代码中fetch地址写死了http://localhost:5000/auth/verify，这是开发环境的后端地址，生产构建后会出现适配问题：

• 若前端部署到非本地环境，用户访问时浏览器会请求当前访问域名下的localhost:5000，无法匹配实际的后端服务，返回的是404/502错误的HTML页面，不属于合法JSON格式，调用response.json()就会直接报错
• 就算本地运行构建后的包，也要确认后端服务确实在本地5000端口启动，且CORS配置允许前端的访问源
  修复方法：将请求地址替换为环境变量动态配置，开发环境走本地后端地址，生产环境走实际部署的后端域名，示例如下：

const BASE_URL = process.env.NODE_ENV === 'production' 
  ? 'https://你实际部署的后端域名' 
  : 'http://localhost:5000'
// 发起请求时拼接路径
const response = await fetch(`${BASE_URL}/auth/verify`, {
  // 保留原有请求配置
})

同时确认生产环境后端的CORS配置已经放开前端部署的域名访问权限，避免跨域拦截导致请求失败。

2. 增加响应状态校验，先确认请求正常再解析JSON #

你的现有代码不管响应状态是200还是403/404，直接调用response.json()，如果token失效/不存在、请求被拦截，返回的内容可能不是JSON格式，就会直接抛出错误，可按如下逻辑优化代码：

async function isAuth() {
  try {
    const response = await fetch("http://localhost:5000/auth/verify", {
      method: "GET",
      headers: { token: localStorage.token }
    })
    // 先判断响应状态是否为2xx正常状态
    if (!response.ok) {
      setIsAuthenticated(false)
      return
    }
    const parseRes = await response.json()
    parseRes === true ? setIsAuthenticated(true) : setIsAuthenticated(false)
  } catch (error) {
    console.error(error.message)
    // 解析错误也统一处理为未授权，避免页面崩溃
    setIsAuthenticated(false)
  }
}

3. 排查后端环境变量配置 #

生产环境部署后端时，要确认ACCESS_TOKEN_SECRET环境变量已正确配置，若部署时没有配置该变量，jwt.verify会直接抛出错误，虽然你后端逻辑中已经做了异常捕获返回JSON，但也可排查该点避免后端逻辑异常返回非JSON内容。

4. 登录注册接口报错的统一处理 #

登录、注册接口报错的原因和上述逻辑一致，大概率也是请求地址硬编码导致的问题，统一替换为环境变量配置的BASE_URL即可。

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