React向Flask发送POST请求时JSON数据无法接收问题求助

云上老周

2026-4-29

排查React向Flask发送POST请求时JSON数据丢失的问题

我来帮你定位问题！你遇到的核心问题出在React端的fetch调用写法上，咱们一步步拆解：

问题根源

先看你React代码里的POST请求片段：

const requestOptions = { 
  method: 'POST', 
  headers: { 'Content-Type': 'application/json' }, 
  body: JSON.stringify({ title: 'React Hooks POST Request Example',action: 'clicked' }) 
}; 
var myParams = { data: requestOptions } 
fetch('http://127.0.0.1:5000/login', myParams)

这里犯了一个关键错误：fetch的第二个参数需要直接传入请求配置对象，而不是把配置包在data属性里。你当前的写法会让fetch错误地处理请求参数，导致Flask端完全接收不到正确的JSON请求体，所以request.get_json()返回None，触发了你设置的Missing JSON提示。

修正后的React代码

把POST请求部分改成下面这样：

const requestOptions = { 
  method: 'POST', 
  headers: { 'Content-Type': 'application/json' }, 
  body: JSON.stringify({ title: 'React Hooks POST Request Example',action: 'clicked' }) 
}; 
// 直接将requestOptions作为fetch的第二个参数传入
fetch('http://127.0.0.1:5000/login', requestOptions) 
  .then(response => response.json()) 
  .then(data => setAccessToken(data.access_token))
  // 新增错误捕获，方便排查后续问题
  .catch(error => console.error('请求出错:', error));

额外优化建议

CORS配置确认：虽然你已经引入了flask_cors，确保Flask app初始化时正确启用CORS，比如：
```
CORS(app)  # 放在app = Flask(__name__)之后
```
避免浏览器因跨域政策拦截请求。
错误处理完善：给fetch添加.catch()可以在浏览器控制台直观看到请求过程中的异常，比如网络错误、响应格式错误等。
端口一致性：确认Flask确实运行在5000端口，React端的请求URL与Flask服务地址完全匹配。