Flask-React前后端连接异常：fetch JSON触发语法错误

问题描述 #

我是React.js和Flask新手，跟着一份过时教程搭建基础应用（代码仓库：flaskdemo）。启动Flask后端（运行api.py）和React前端（执行npm start）后，浏览器控制台报错：

(in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON"

目标对象无法在控制台打印，但VSCode终端无报错，且访问localhost:5000能确认后端已正确返回目标对象，错误出现在以下React代码的response.json()处：

import React, { useState, useEffect } from 'react';
import { Card } from '../Components/Card/card';

export const TodoPage = () =>{

  const [todo, setTodo] = useState([])

  useEffect(()=> {
    fetch('/api').then(response => {
      if (response.ok) {
        return response.json() // 错误发生在此处
      } else {
        console.log(response)
      }
    }).then(data => console.log(data))
  },[]) 

  return(
    <>
      <Card/>
    </>
  )
}

解决步骤 #

• 配置React代理：React默认运行在3000端口，Flask在5000端口，直接fetch('/api')会请求React服务的3000端口，返回的是React的index.html文件（而非后端JSON）。在React项目的package.json中添加代理配置：

  "proxy": "http://localhost:5000"
  

  添加后重启React开发服务器，此时fetch('/api')会自动转发到Flask的5000端口。

• 确认Flask返回JSON格式：确保Flask的/api路由使用jsonify返回JSON数据，而非渲染HTML模板。示例后端代码：

  from flask import Flask, jsonify
  
  app = Flask(__name__)
  
  @app.route('/api')
  def api_endpoint():
      # 返回目标JSON对象
      return jsonify({"todo": ["示例任务1", "示例任务2"]})
  

• 直接测试完整URL：若代理配置后仍有问题，可暂时用完整URL发起请求排查：

  fetch('http://localhost:5000/api')
  

  能正确获取JSON则说明代理配置未生效，需检查package.json的代理配置是否正确，或尝试重启React服务。

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