React部署Render后调用API报Uncaught (in promise) SyntaxError错误

核心问题 #

你遇到的Uncaught (in promise) SyntaxError: Unexpected end of input错误，根源在于**mode: 'no-cors'的错误使用**：

• 当设置mode: 'no-cors'时，浏览器会强制限制前端读取响应内容，即使API返回了正确的JSON，前端也无法获取到任何有效数据，调用response.json()自然会因无内容可解析报错。
• 本地环境可能因为同源策略未触发（比如前端和API在同一端口），所以能正常工作；部署到Render后跨域，加了no-cors反而阻断了响应读取。

另外代码里还有两个次要问题：

1. response.json()已经完成了解析，不需要再调用JSON.parse(responseBody)，这会导致二次解析对象的错误。
2. 判断数组是否为空用foodCat !== []永远为true（数组是引用类型，和空数组不是同一引用），应该用foodCat.length > 0。

修复步骤 #

1. 移除mode: 'no-cors'并配置后端CORS #

删掉fetch选项里的mode: 'no-cors'，然后确保你的Render后端API配置了CORS，允许前端域名访问：

• 如果是Express后端，安装并使用cors中间件：

  const cors = require('cors');
  app.use(cors({
    origin: "https://your-frontend-domain.onrender.com" // 替换成你的前端Render域名
  }));
  

• 开发阶段可以临时用app.use(cors())允许所有域名，但生产环境建议指定具体域名。

2. 修正API调用的代码逻辑 #

调整loadData函数，修复解析逻辑和错误处理：

const loadData = async () => {
  try {
    const response = await fetch('https://zxcasdqwq.onrender.com/foodData', {
      method: "POST",
      headers: {
        "Content-Type": 'application/json'
      }
      // 移除mode: 'no-cors'
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const jsonData = await response.json(); // 直接拿到解析后的JSON
    const [foodItemData, foodCatData] = jsonData;

    if (foodItemData && foodCatData) {
      console.log("Data is there in response");
      setfoodItem(foodItemData);
      setfoodCat(foodCatData);
    } else {
      console.log("No data is there in response");
    }
  } catch (error) {
    console.error("Error loading data:", error);
  }
}

3. 修正数组为空判断 #

将模板里的foodCat !== []改为foodCat.length > 0，foodItem !== []改为foodItem.length > 0：

<div className='container ' >
  {
    foodCat.length > 0
      ? foodCat.map((value) => {
          // ... 原有逻辑
        })
      : <div>No Categories Found</div>
  }
</div>

验证步骤 #

1. 重新部署后端（配置CORS后）和前端。
2. 打开浏览器控制台，检查是否还有跨域错误或解析错误。
3. 如果仍有问题，查看Network面板中API请求的响应状态和内容，确认是否返回了正确的JSON。

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