如何使用 Reactjs fetch 将 POST 数据发送到烧瓶

Posted 2023-02-25

【中文标题】如何使用 Reactjs fetch 将 POST 数据发送到烧瓶

【英文标题】：How to send POST data to flask using Reactjs fetch

【发布时间】：2019-06-06 23:27:39

【问题描述】：

我对反应非常陌生，我正在尝试掌握如何正确使用 fetch。我有这条 python 烧瓶路线，我试图从后端击中，看起来像这样：

@app.route('/api/v1', methods=['POST'])
def postTest():
    if not request.json:
        return "not a json post"
    return "json post succeeded"

现在，当我与邮递员达成这一点时，我实际上能够获得成功的信息。

这就是我的 reactjs fetch 的样子：

returnFlaskPost() 
  return fetch( 'http://localhost:5000/api/v1', 
    headers: 
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    , 
    method: 'POST',
    body: 
      'user1':'1234'
    
  );

每当我运行我的应用程序并尝试将此函数读取到控制台时，我得到的结果是：

有人可以向我解释我做错了什么以及我可以做些什么来解决这个问题。我将不胜感激。

【问题讨论】：

仔细阅读消息你会有一个想法

请参阅此 S/O 以获得澄清 ***.com/questions/26980713/…

Solve Cross Origin Resource Sharing with Flask的可能重复

因为跨域请求被浏览器屏蔽了。你应该在你的烧瓶应用程序中设置CORS。也许这会有所帮助How to enable CORS in flask and heroku

您是否尝试在 package.json 中添加一个指向您的其他 localhost 的代理？

【参考方案1】：

这是跨域资源共享的问题。在您的情况下，您正在尝试从不同的 URL 访问 API 端点，因为 API 是在自身上提供的。顺便说一句， 127.0.0.1:3000 和 127.0.0.1:5000 被认为是两个不同的 URL，因此导致了您所指的错误。因此，要解决此问题，您需要执行以下步骤：

安装 Flask-CORS：

pip install flask-cors

在您的 Flask 应用程序中包含此代码（可能是 __init__.py）：

from flask_cors import CORS
CORS(app)

就是这样！