未捕获（承诺中）语法错误：意外的标记“<”，“<！DOCTYPE”...不是有效的 JSON

Question

未捕获（承诺中）语法错误：意外的标记“<”，“<！DOCTYPE”...不是有效的 JSON

我的后端在node.js和express.js

    import express from 'express';
    import bcrypt from 'bcrypt-nodejs';
    import cors from 'cors';
    
    const app = express();
    
    app.use(express.urlencoded({extended: false}));
    app.use(express.json());
    app.use(cors());
    const database = { users: [
        {
            id: '123',
            name: 'John',
            email: 'john@gmail.com',
            password: 'cookies',
            entries: 0,
            joined: new Date()
        },
        {
            id: '124',
            name: 'Tom',
            email: 'Tom@gmail.com',
            password: 'apple',
            entries: 0,
            joined: new Date()
        }
    
    }
    
    app.get('/', (req, res) =>{
        res.send(database.users)
    })
    
    
    app.listen(3002, () => {
       console.log('app is running on port 3002');
    })

我的前端位于React.js

这是一个大项目，所以我只会显示导致错误的部分response.json()。当你摆脱json()一切都很好，但对于我来说，要从后端接收数据，我需要这样做，.json()这会产生该错误。如果需要更多信息，请告诉我

      componentDidMount(){
        fetch('http://localhost:3000')
        .then(response => response.json())
        .then(console.log)
      }

Answer 1

看起来您的后端暴露在端口 3002 上，但您正在端口 3000 上获取，我认为这是您的本地开发 UI。该DOCTYPE响应表明您收到的是 HTML 响应，而不是 JSON 响应。更改您的获取端口以指向您的后端，它应该可以工作：

 componentDidMount(){
    fetch('http://localhost:3002')
    .then(response => response.json())
    .then(console.log)
  }