如何在 React 应用程序中使用 Fetch 向 Flask API 发送 POST 请求 [重复]答案

【问题标题】：How to send a POST request to Flask API using Fetch in a React app [duplicate]如何在 React 应用程序中使用 Fetch 向 Flask API 发送 POST 请求 [重复]
【发布时间】：2021-01-08 00:58:45
【问题描述】：

为了演示我的问题，我做了一个简单的例子

    import React, { useEffect } from 'react';

    function App() {
  useEffect(() => {
    fetch('/get')
      .then((response) => response.json())
      .then((data) => console.log(data));
  }, []);

  useEffect(() => {
    fetch('/post', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: 'React POST Request' })
    })
      .then((response) => response.json())
      .then((data) => console.log(data));
  }, []);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: 'React POST Request' })
    })
      .then((response) => response.json())
      .then((data) => console.log(data));
  }, []);

  return <div className="App"></div>;
}

export default App;

在第一个 useEffect 钩子中，我正在向我的烧瓶 API 发送一个 GET 请求并记录请求的响应。

在第二个useEffect 钩子中，我向我的flask API 发送POST 请求并记录请求的响应。

在第三个useEffect 钩子中，我正在向jsonplaceholder.typicode.com/posts 发送一个POST 请求并记录请求的响应。

第一个useEffect 输出：

第二个useEffect 输出：

第三个useEffect 输出：

我对我的 Flask API 和 jsonplaceholder.typicode.com API 的请求使用相同的发布请求代码，但我的 API 的响应始终是空对象 {}。这不是预期的。它应该返回这个{ title: 'React POST Request' } 对象。我试图找到解决方案，但对我没有任何帮助。

我的简单 Flask API：

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


app = Flask(__name__)
CORS(app)

@app.route('/get', methods=['GET'])
def get():
   return { "title": 'React GET Request' }

@app.route('/post', methods=['POST'])
def post():
   return request.args

.flaskenv file:

FLASK_APP=api.py
FLASK_ENV=development

package.json文件：

{
  "name": "flask-app-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:5000"
}

顺便说一句，我正在使用 create-react-app 包来设置我的 React 应用程序。

【问题讨论】：

尝试从api端发送jsonify对象，from flask import Josnify 然后返回return jsonify(data)
你见过吗：Get the data received in a Flask request，request.args 看起来像是在查询字符串中发送数据时使用的键，而不是在请求中 body跨度>

标签： javascript python reactjs flask fetch-api

【解决方案1】：

没错。那是因为request.args 就是这样。

https://flask.palletsprojects.com/en/1.1.x/api/?highlight=request%20args#flask.Request.args

解析后的网址参数（网址中问号后的部分）。

request.args 是查询字符串参数，您在 POST 中没有提供任何查询字符串参数。

我对烧瓶生疏了，但文档说 request.json 会返回您的 json 编码帖子。

https://flask.palletsprojects.com/en/1.1.x/api/?highlight=request%20json#flask.Request.json

【讨论】：