React中Fetch请求报SyntaxError: Unexpected end of input问题求助

核心问题 #

你设置了mode: "no-cors"，这会让浏览器返回不透明响应（opaque response）——这种响应的内容完全被浏览器屏蔽，根本没法读取它的body，所以调用response.json()时自然会抛出Unexpected end of input错误，因为没有可解析的JSON内容。

解决步骤 #

1. 移除mode: "no-cors"配置
   直接删掉fetch选项里的这个配置，它是导致问题的根源。调整后的fetch代码：

const response = await fetch("http://bmraapi.ddns.net/fuel/acceptances/fuel/BIOMASS/y/2024/m/08/d/11");
let bidOffer = await response.json();

2. 在Node服务器端配置CORS
   移除no-cors后，浏览器会触发跨域检查，必须在你的家用Node服务器上开启CORS支持：

• 如果用Express框架，最简单的方式是用cors包：
  先安装依赖：

  npm install cors
  

  然后在服务器代码中引入并启用：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  // 允许所有跨域请求（生产环境建议指定你的React应用域名，比如http://localhost:3000）
  app.use(cors());
  
  // 你的路由、业务逻辑代码...
  
  app.listen(你的端口号, () => {
    console.log('服务器运行中');
  });
  

• 不想用第三方包的话，也可以手动设置响应头：

  app.use((req, res, next) => {
    // 允许指定域名跨域，*代表允许所有，生产环境替换成你的React应用地址
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    next();
  });
  

配置完成后，重启Node服务器，再运行React代码就能正常获取并解析JSON数据了。

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