javascript - 如何使用 Reactjs 获取将 POST 数据发送到 flask

Question

我对 react 还很陌生，我正在努力掌握如何正确使用 fetch。我有这条 python flask 路线，我正试图从后端击中它，看起来像这样:

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

现在，当我与 postman 达成这一点时，我实际上能够获得我的成功消息。

这是我的 reactjs 获取的样子:

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

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

有人可以向我解释我做错了什么，我该怎么做才能解决这个问题。我将不胜感激。

Answer 1

这是Cross Origin Resource Sharing的问题。在您的情况下，您正尝试从不同的 URL 访问 API 端点，因为 API 是在其自身上提供服务的。顺便说一句，127.0.0.1:3000 和 127.0.0.1:5000 被视为两个不同的 URL，因此导致您所指的错误。因此，要解决此问题，您需要执行以下步骤:

1. 安装 Flask-CORS:

   pip install flask-cors
   

2. 将此代码包含在您的 Flask 应用程序中(可能是 __init__.py):

   from flask_cors import CORS
   CORS(app)
   

就是这样!