React请求Node.js后端JSON返回HTML，报SyntaxError错误求助

云上老周

2026-8-19

问题解决方案

核心问题：请求路径不匹配

你的后端将支付相关路由挂载在了/api前缀下，但前端请求时未添加该前缀，导致请求被React单页应用的路由机制接管，返回了前端的index.html文件，进而触发JSON解析错误。

具体修复步骤：

修正前端请求路径
修改ApiCalls.js中的请求地址，补充/api前缀：

export const getOrder=()=>{
    return fetch(`${process.env.REACT_APP_BACKEND}/api/createorder`,{
        method: "GET",
        headers: {
            'Content-Type':'application/json'
        }
    }).then(response=>response.json())
    .catch((err)=>console.log(err))
}

验证环境变量配置
确保前端项目.env文件中的REACT_APP_BACKEND值正确，格式应为http://localhost:5000（注意不要在末尾添加斜杠）。
确认后端接口可用性
先在浏览器直接访问http://localhost:5000/api/createorder，检查是否能返回正常的JSON数据，示例格式如下：

{
  "id": "order_xxxxxx",
  "entity": "order",
  "amount": 50000,
  "currency": "INR",
  ...
}

可选：配置React代理简化路径
如果不想每次请求都写全路径，可以在前端项目的package.json中添加proxy字段，实现请求自动转发：

"proxy": "http://localhost:5000"

之后ApiCalls.js可简化为：

export const getOrder=()=>{
    return fetch('/api/createorder',{
        method: "GET",
        headers: {
            'Content-Type':'application/json'
        }
    }).then(response=>response.json())
    .catch((err)=>console.log(err))
}