React向Flask服务器发起请求时出现Network Error问题求助

我在React应用向Flask服务器发起网络请求时遇到异常：Flask服务器可成功接收请求，但返回响应时客户端持续出现Network Error，使用fetch或axios发起简单GET请求均触发该问题。

服务器配置详情 #

• Flask服务器运行在http://127.0.0.1:8000
• 使用flask_cors配置跨域
• 即使发生异常，服务器仍返回对应状态码
• 代码示例：

@app.route('/test', methods=['GET'])
def test():
    delete_db(["***"])
    try:
        for data in array:
            suppliers = build_supliers(data)
            for supplier in suppliers:
                insert_supplier(suppliers[supplier])
        
        logger.info('All suppliers have been inserted successfully');
        return jsonify({"data":None, "status":200, "message": "successfully"})
    except Exception as e:
        logger.error(f"An error occurred during synchronization: {str(e)}")
        return jsonify({"error": str(e), "status": 500, "message": "Internal Server Error"})

客户端代码 #

使用fetch或axios发起GET请求，已设置请求头Accept: application/json, text/plain, */*

• 代码示例：

export const test = async (): Promise<any>=> {
  try {
    const response = await axios.get(`${process.env.REACT_APP_SYNC_SERVER}/test`,{ headers: {
    "Accept": "application/json, text/plain, */*",
  },});
    return response.data;
  } catch (error:any) {
    const { data } = error.response;
    throw data;
  }
};

已尝试的解决措施 #

• 验证服务器可访问性
• 检查CORS配置
• 查看浏览器控制台获取更多错误细节
• 尝试使用fetch发起相同请求

错误对象信息 #

{
    "message": "Network Error",
    "name": "AxiosError",
    "stack": "AxiosError: Network Error\n    at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:819713:14)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://localhost:8000/test"
    },
    "code": "ERR_NETWORK",
    "status": null
}

排查及解决建议 #

• 确认服务器响应是否真正发出：在return jsonify(...)前后添加详细日志，比如logger.info("即将返回响应")和logger.info("响应已发送完成")，验证服务器是否确实完成了响应输出。
• 简化接口逻辑排查耗时问题：临时注释掉delete_db、build_supliers、insert_supplier等耗时操作，直接返回成功响应，看是否还会触发Network Error，以此判断是否是业务逻辑阻塞导致的响应超时。
• 检查CORS配置的完整性：确保flask_cors是全局生效（如CORS(app)），或明确对/test路由配置跨域。同时在浏览器Network面板查看响应头中的Access-Control-Allow-Origin等CORS相关字段是否正确，是否存在自定义响应头未被允许的情况。
• 深挖浏览器Network面板的错误细节：在Chrome DevTools的Network标签中，找到失败的请求，查看Timing标签的阶段划分，确认是在哪个环节中断（如Request Sent后无Response）；同时查看Console面板是否有更具体的错误提示（如ERR_CONNECTION_RESET）。
• 统一请求地址的主机名：将客户端请求地址从http://localhost:8000改为http://127.0.0.1:8000，排除本地主机名解析差异带来的问题。
• 检查数据库操作的阻塞情况：若delete_db或insert_supplier是同步且耗时极长的操作，可能导致Flask Worker进程被卡住无法返回响应。可以替换为模拟的快速操作，验证是否是数据库层的问题。
• 完善服务器异常捕获范围：将delete_db(["***"])也纳入try...except块中，避免该操作报错导致进程直接退出，无法返回响应。

内容的提问来源于stack exchange，提问作者Roni Jack Vituli