使用语法调试反应/烧瓶连接错误：JSON 中位置 0 处的意外令牌<

Question

我遵循https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project尝试连接一个简单的Flask后端与ReactJS使用npx create-react-app和添加单个Flask文件后。

package.json

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

"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

我已经设置了一个Button使用MaterialUI调用一个函数来记录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

尝试调试，但不幸的是我没有得到任何地方。还有一些相关的问题，但似乎都不起作用。我已经尝试将flask文件移动到顶级目录，使用http://localhost:5000/。

Answer 1

作为JavaScript/ReactJS的新手，我似乎错过了两件事

1. 我没有返回Promise，这似乎很奇怪，因为我认为你不必返回东西

和

2. 将路径从/更改为/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."}

Answer 2

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