React通过useEffect Hook调用Python Bottle后端接口报错求助

我用Python的Bottle框架做后端，React做前端，想通过useEffect Hook从http://127.0.0.1:8080/获取数据，但一直报错。

后端代码 #

@get('/')
def _():
    data = {
        'name': 'Alvin',
        'lastname': 'Johnson'
    }
    return json.dumps(data)

前端代码 #

import React, { useEffect, useState } from 'react';

import './App.css';

function App() {

  const [data, setdata] = useState({
    name: '',
    lastname: ''
  });

  useEffect(() => {
    fetch('/').then((res) =>
      res.json()).then((data) => {
        console.log(data);
        setdata({
          name: data.name,
          lastname: data.lastname
        });
      })
  }, []);

  return (
    <div className="App">
      <h1>Welcome to Python-React app</h1>
      <p>{data.name}</p>
      <p>{data.lastname}</p>
    </div>
  );
}

export default App;

package.json 中的proxy配置 #

"proxy":"http://127.0.0.1:8080/",

错误排查与修复方案 #

1. 后端响应头配置错误 #

Bottle直接返回json.dumps(data)时，默认响应头的Content-Type是text/html，但前端用res.json()会尝试解析JSON格式，这会导致解析失败，是核心问题。

修复方法二选一：

• 手动设置响应头：

from bottle import response

@get('/')
def _():
    data = {
        'name': 'Alvin',
        'lastname': 'Johnson'
    }
    response.content_type = 'application/json'
    return json.dumps(data)

• 直接返回字典（Bottle会自动完成JSON序列化并设置正确响应头）：

@get('/')
def _():
    data = {
        'name': 'Alvin',
        'lastname': 'Johnson'
    }
    return data

2. 前端未捕获错误 #

当前fetch代码没有错误捕获逻辑，无法定位具体报错信息，建议添加catch块：

useEffect(() => {
  fetch('/')
    .then((res) => {
      if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
      return res.json();
    })
    .then((data) => {
      console.log(data);
      setdata({ name: data.name, lastname: data.lastname });
    })
    .catch(err => console.error('请求出错:', err))
}, []);

3. Proxy配置生效检查 #

• 确保package.json中的proxy配置无多余空格，且React开发服务器（默认端口3000）已重启，让proxy配置生效。
• 先直接在浏览器访问http://127.0.0.1:8080/，确认后端返回的是标准JSON格式，且响应头包含Content-Type: application/json。

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