Debugging React/Flask connection with SyntaxError: Unexpected token < in JSON at position 0

Question

我正在关注 https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project 在使用 npx create-react-app 并添加单个烧瓶文件后尝试将简单的 Flask 后端与 ReactJS 连接。

package.json

我在 "proxy": "http://localhost:5000" 上设置了一个代理，使用新的脚本命令 yarn start-backend。

  "scripts": {
    "start": "react-scripts start",
    "start-backend": "cd app && python3 app.py",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

nav.js

我已经使用 MaterialUI 设置了一个 Button，它调用一个函数来记录 JSON 响应。

class Nav extends React.Component {

    clicked() {
        fetch('/').then(res => {
            console.log(res.json());
        }).then(data => {
            console.log(data);
        })
    }

    render() {
        return (
            <Box sx={{ flexGrow: 1}}>
                <AppBar position="static">
                    <Toolbar>
                        <SignUpForm onClick={() => this.clicked()} />
                    </Toolbar>
                </AppBar>
            </Box>
        )
    }
}

在顶级目录中，我创建了一个名为 app 的目录，其中包含一个包含以下代码的 app.py 文件。

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return {"msg": "homepage from the backend."}

if __name__ == "__main__":
    app.run(port=5000, debug=True)

当我使用 yarn start 和 yarn start-backend 并单击按钮时，出现以下错误

Promise {<pending>}
nav.js:14 undefined
VM1769:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

正在尝试调试，但不幸的是，我一无所获。有相关问题，但似乎没有任何效果。我尝试使用 http://localhost:5000/.

将烧瓶文件移动到顶级目录 public

Answer 1

fetch('/', {
     headers : { 
          'Content-Type': 'application/json',
          'Accept': 'application/json'
         }
}).then(res => {
            console.log(res.json());
        }).then(data => {
            console.log(data);
        })

Answer 2

好的，作为 JavaScript/ReactJS 的新手，我似乎遗漏了两件事

我没有 return Promise 这看起来很奇怪，因为我认为你不必 return 东西

和

将路径从 / 更改为 /api/test 似乎可行。

我必须进一步挖掘才能理解，但现在它解决了我的问题。

这是更改后的代码

    clicked() {
        fetch('/api/test')
            .then(res => {return res.json()} )
            .then(
                data => {
                    console.log(data)
            })
    }

和


@app.route("/api/test")
def home():
    return {"msg": "homepage from the backend."}

Debugging React/Flask connection with SyntaxError: Unexpected token < in JSON at position 0

Debugging React/Flask connection with SyntaxError: Unexpected token < in JSON at position 0

javascript

json

fetch-api