代码无明显问题却出现Axios网络错误，寻求解决方案

核心问题分析 #

1. 同源策略限制：即使React和Flask部署在同一机器，浏览器的同源策略依然会拦截跨域请求，Flask默认未配置CORS（跨域资源共享），导致请求被阻止。
2. 请求格式异常：API端的乱码错误是因为浏览器发送的跨域预检OPTIONS请求未被正确处理，导致请求解析失败，出现乱码的错误日志。

解决方案步骤 #

1. 为Flask配置CORS

首先安装flask-cors包：

pip install flask-cors

修改Flask代码，全局启用CORS：

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
# 全局启用CORS，允许所有来源的请求
CORS(app)

@app.route('/')
def all_data():
    all_data = "Hello"
    return jsonify({
        'data':all_data,
        'message':"success"
    }), 200

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

2. 确保协议一致（HTTP/HTTPS匹配）

如果你的React项目是通过HTTPS启动的（比如使用HTTPS=true npm start），而Flask API是默认的HTTP协议，浏览器会阻止混合内容请求，导致Network Error。解决方式：

• 改用HTTP启动React：直接运行npm start（默认端口3000，HTTP协议）
• 或者为Flask配置HTTPS（适合生产环境，开发环境推荐前者）

3. 检查React代码的遗漏点

• 确认已安装axios：

npm install axios

• 在React组件顶部添加axios导入：

import axios from 'axios';

验证修改 #

重启Flask API和React项目后，React应该能正常获取到API返回的{"data": "Hello", "message": "success"}数据，API端也不会再出现乱码错误。

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