从Flask后端请求JSON时出现JSON.parse错误，如何解决？

我正在开发一款应用，用Flask（Python）给React前端传递字典数据。后端返回的是合法JSON，但前端一直报错：JSON.parse: unexpected character at line 1 column 1 of the JSON data，求解决办法。

后端代码（server.py） #

from flask import Flask

app = Flask(__name__)

@app.route("/members")
def members():
    return {"members": ["Member1","Member2","Member3"]}

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

前端代码（App.js） #

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

function App() {

  const [data, setData] = useState([{}])

  useEffect(() => {
    fetch("/members").then(
      res => res.json()
    ).then(
      data => {
        setData(data)
        console.log(data)
      }
    )
  }, [])

  return (
    <div>

    </div>
  );
}

export default App;

前端入口代码（index.js） #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

报错信息 #

运行代码后，始终出现如下错误：
Uncaught runtime errors:
ERROR
JSON.parse: unexpected character at line 1 column 1 of the JSON data
ERROR
JSON.parse: unexpected character at line 1 column 1 of the JSON data

问题原因及解决办法 #

这个报错核心原因是前端请求没有正确获取到后端的JSON数据，大概率是跨域限制或请求地址错误，导致返回了HTML错误页面（比如404），解析时触发JSON格式错误。

步骤1：解决跨域问题 #

Flask默认不允许跨域请求，需添加CORS支持：

1. 安装依赖：

   pip install flask-cors
   

2. 修改server.py：

   from flask import Flask
   from flask_cors import CORS
   
   app = Flask(__name__)
   CORS(app)  # 允许所有域名跨域访问
   
   @app.route("/members")
   def members():
       return {"members": ["Member1","Member2","Member3"]}
   
   if __name__ == "__main__":
       app.run(debug=True)
   

步骤2：确保请求地址正确 #

两种方式任选其一：

• 直接使用完整地址：修改App.js中的fetch：

  fetch("http://localhost:5000/members")
  

• 配置React代理：在React项目的package.json中添加：

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

  保存后重启React开发服务器，此时fetch("/members")会自动转发到后端地址。

步骤3：验证接口返回 #

在浏览器地址栏输入http://localhost:5000/members，确认返回的是标准JSON：

{"members": ["Member1","Member2","Member3"]}

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