ReactJS前端与Flask后端跨设备数据提交失败问题求助

搭建了一个带有用户输入表单的项目，表单数据通过Flask服务器存入MongoDB Atlas。在运行服务器的本地设备上操作时，前后端均可正常启动，填写表单后数据能成功写入数据库；但从其他设备访问该项目并提交表单时，数据无法存入数据库，报错截图如下：

Flask后端代码：

#Import required libraries
import pymongo
from flask import Flask, request, jsonify,render_template
from bson.objectid import ObjectId
from flask_cors import CORS,cross_origin
import export

export.init(default=export.PUBLIC)

#Connect to MongoDB Atlas
client = pymongo.MongoClient("mongodb+srv://D:D@cluster0.unaufu9.mongodb.net/R?retryWrites=true&w=majority")
db = client.R

#Initialize flask application
app = Flask(__name__)
CORS = (app)

@app.route("/")
def my_index():
    return render_template("<h1>HEll O! World",flask_token="hello")

排查与解决方案 #

1. 修正Flask服务器绑定地址 #

Flask默认仅绑定127.0.0.1，仅本地可访问。要允许其他设备连接，启动服务器时需绑定到0.0.0.0：

flask run --host=0.0.0.0

或者在代码中直接指定：

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

2. 修复CORS配置 #

代码中CORS = (app)是错误的赋值写法，无法正确启用CORS中间件。改为：

# 替换原CORS赋值代码
CORS(app)
# 若需允许所有域名跨域请求（测试环境可用）：
CORS(app, resources={r"/*": {"origins": "*"}})

错误的CORS配置会导致浏览器拦截跨域请求，无法完成数据提交。

3. 检查MongoDB Atlas IP白名单 #

MongoDB Atlas默认仅允许本地IP访问数据库。登录Atlas控制台，进入Network Access页面：

• 测试环境可临时添加0.0.0.0/0允许所有IP访问（生产环境不推荐）
• 生产环境添加对应设备的公网IP到白名单

4. 确认前端请求地址正确 #

前端发送表单请求时，需使用运行Flask服务器设备的局域网IP地址（如http://192.168.1.100:5000/api/your-endpoint），而非localhost或127.0.0.1——其他设备无法通过本地回环地址访问你的服务器。

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