在reactjs中单击按钮时出现无效的JSON错误

Question

我正在尝试构建一个简单的react页面，其中一开始有两个按钮。第一个在单击时发送字符串"private"作为响应，第二个在单击后发送字符串"public"作为响应。这两个字符串应该来自mongodb数据库。它还没有完成，因为每当我点击任何按钮时，我都会一次又一次地收到同样的错误。如下所示：

未捕获(在promise中(语法错误：意外的标记"<"lt；！DOCTYPE"；。。。不是有效的JSON

这个项目有一个后端服务器，有两个GET请求和一个react前端。你可以在下面看到它们。前端：

function PubPrivBtn() {
async function clickHandler(e) {
if (e.target.id === 'pubBtn') {
let response = await fetch('/api/public');
let result = await response.json();
console.log(result);
}
if (e.target.id === 'privBtn') {
let response = await fetch('/api/private');
let result = await response.json();
console.log(result)
}
}
return (
<div>
<button onClick={(e) => clickHandler(e)} id='pubBtn'>Public</button>
<button onClick={(e) => clickHandler(e)} id='privBtn'>Private</button>
</div>
)}export default PubPrivBtn;

后端：

import mongoose from "mongoose";
import express from "express";
import props from './porp.model.js'
const app = express();
app.use(express.json());
mongoose.connect('mongodb://localhost/auth', async (err, db) => {
if (err) {
console.log(err)
}
else{
console.log('Connected!')
}
app.get('/api/public', async (req, res) => {
let pub = await props.where("vis").equals("public")
console.log(pub);
res.send(pub)
})
app.get('/api/private', async (req, res) => {
let priv = await props.where("vis").equals("private")
console.log(priv);
res.send(priv)
})
})
app.listen(3001)

另外，模式是const porp = new mongoose.Schema({ vis: String })。

我试着从零开始重新制作整个项目(并不是什么大事(，但什么都没有改变，所以我不得不认为问题不在我的代码中。或者也许我错了，这是显而易见的。

Answer 1

我的"proxy": "http://localhost:3001",在错误的包.json中我已经把它换到了前端，现在它工作得很好。谢谢@Konrad Linkowski！如果我没有注意到，你的评论肯定会解决的！