调试React与Flask连接时报SyntaxError: Unexpected token < in JSON错误

1. 修复fetch调用语法错误 #

你的fetch链式调用缺少返回值，导致第二个then拿不到解析后的JSON数据，同时提前打印未完成解析的Promise对象才会输出Promise {<pending>}，正确写法如下：

clicked() {
    fetch('/api/')
    // 这里需要把res.json()返回给下一个链式调用，不能只做打印操作
    .then(res => res.json())
    .then(data => {
        console.log(data);
    })
    .catch(err => {
        console.error('请求错误：', err);
    })
}

2. 解决请求路径被React开发服务器拦截问题 #

你当前请求的是根路径/，Create React App的开发服务器会默认将根路径的请求返回React的入口HTML文件，不会转发给代理的Flask服务，所以你拿到的实际是HTML文本，解析JSON时就会报Unexpected token <的错误，按以下步骤修改：

修改Flask接口前缀 #

给所有Flask接口统一加/api前缀，避免和React的路由、静态资源路径冲突：

from flask import Flask

app = Flask(__name__)

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

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

可选：跨域兼容处理 #

如果修改路径后仍有跨域问题，可以给Flask安装跨域依赖解决：

• 安装依赖：pip install flask-cors
• 开启全局跨域：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

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

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

所有修改完成后重启前端、后端服务即可正常调用接口。

内容的提问来源于stack exchange，提问作者Paul