React代码运行出现SyntaxError：Unexpected end of input错误求助

你看到的"Unexpected end of input"语法错误提示属于误导，实际问题出在fetch的no-cors配置上：

• 当设置mode: 'no-cors'时，浏览器会返回不透明响应（opaque response），这种响应完全无法读取内容，调用res.json()会直接抛出错误，Promise捕获到的错误被误报为类似语法错误的提示。
• 你的代码本身没有语法问题，错误根源是no-cors模式的使用场景不符合需求。

解决方法 #

• 移除no-cors模式：如果后端已经配置了CORS（跨域资源共享），直接删除该配置，使用fetch默认的cors模式，同时建议添加错误捕获方便排查：

useEffect(() => {
  fetch("http://localhost:8000/api")
    .then(res => res.json())
    .then(data => setBackendData(data))
    .catch(err => console.error('请求异常:', err))
}, [])

• 后端配置CORS：如果后端未配置CORS，需要在后端服务（比如Node.js/Express）中添加CORS中间件，允许前端域名的请求。
• 使用React代理：如果后端无法修改，可在项目package.json中添加代理配置，将API请求转发到后端：

"proxy": "http://localhost:8000"

之后修改fetch请求路径：

fetch("/api")
  .then(res => res.json())
  .then(data => setBackendData(data))

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