SyntaxError：JSON.parse：React 应用程序上 JSON 数据的第 1 行第 1 列的意外字符

Posted 2023-02-22

【中文标题】SyntaxError：JSON.parse：React 应用程序上 JSON 数据的第 1 行第 1 列的意外字符

【英文标题】：SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data on React app

【发布时间】：2020-01-17 11:58:51

【问题描述】：

我有一个在后端使用 express 的 React 应用程序。我尝试通过 fetch API 调用从我的数据库中获取消息列表。

前端代码：

App.js

getMessages = () => 
fetch('/api/mess')
.then(res => res.json())
.then(res => 
  var Messages = res.map(r => r.messages);
  this.setState( Messages );
);

;

后台代码：

api/mess.js

var express = require('express');
var Mess = require('../queries/mess');

var router = express.Router();

router.get('/', (req, res) => 
        Mess.retrieveAll((err, messages) => 
        if (err)
            return res.json(err);
        return res.json(messages);
    )
);

router.post('/', (req, res) => 
    var message = req.body.message;
    Mess.insert(message, (err, result) => 
        if (err)
            return res.json(err);
        return res.json(result);
    );
);

module.exports = router;

queries/mess.js

const db = require('../database');

class Mess 
    static retrieveAll(callback) 
        db.query('SELECT * FROM mess;', (err, res) => 
            if (err.error) 
                return callback(err);
            callback(res); 
        );
    

    static insert(mess, callback) 
        db.query('INSERT INTO mess (messages) VALUES ($1)', [mess], (err, res) => 
            if (err.error)
                return callback(err);
            callback(res);
        );
    


module.exports = Mess;

index.js

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');

var db = require('./database');

const ENV = process.env.NODE_ENV;
const PORT = process.env.PORT || 3011;

const app = express();
app.use(express.json());
app.use(express.urlencoded( extended: false ));
app.use(bodyParser.json());

app.use('/api/mess', require('./api/mess'));
app.use('/api/roles', require('./api/roles'));

app.listen(PORT, () => 
  console.log(`Server listening on port $PORT...`);
);

module.exports = app;

我在前端收到此错误：

SyntaxError：JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符

我已经尝试并更改了每个响应和请求以使用 JSON.parse 或 .json 并且无论如何我都会收到相同的消息。

当我使用浏览器并转到 api 通道时，我会得到一个格式正确的 JSON，其中包含 db 的内容。

我错过了什么吗？

编辑：

堆栈跟踪非常小：

当我尝试时：

getMessages = () => fetch('/api/mess') .then(res => console.log(res)); ;

我得到了这个对象：

【问题讨论】：

试试 JSON.parse(data);

控制台中的东西看起来不错 - 我猜它已经在内部被解析为 JSON，或者在途中的某个地方..当你尝试 JSON.parse 一个已经解析的有效对象时，你'会得到那个错误 - 尝试在不调用 .json 或任何内容的情况下记录它。我猜想尝试找出你试图在 FE 上解析它的位置：'.then(res => res.json())'

你能提供堆栈跟踪吗？

当我删除该行时， res.map(r => r.messages) 函数给了我 Unhandled Rejection (TypeError): res.map is not a function

【参考方案1】：

问题是后端在PORT 3011，而api调用是从前端到PORT 3000的。

我需要一个代理来从前端指向后端端口。

我需要在client/package.json (Frontend) 里面添加这一行：

"proxy": "http://localhost/3011"