Python Flask内部服务器错误：在发布表单数据以正确从表单提取值时，如何处理对服务器的请求？

我有一个应用程序，前端是React，后端是Flask，只有一个

app.py

文件。在我尝试使用post请求提交表单后，我在JS控制台中收到一个

内部服务器错误500

，并且在终端中显示：

'NoneType'对象没有属性'upper'

。 单击表单的“提交”按钮后会出现此错误。因此，后端似乎没有正确处理请求

我已尝试重新启动flask服务器，并已将CORS添加到应用程序中。我也会发布前端代码，以防有助于显示上下文

我想我只是想知道我的后端代码是否正确地处理了从表单的textarea部分提取值

inputText

的请求，或者是否有其他问题？它到底到达服务器了吗

app.py代码：

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
app.debug = True
CORS(app)

@app.route('/process', methods=['POST'])
def result():
        text = request.form.get('inputText')
        upper_text = text.upper()
        print(upper_text)

        return upper_text

import React, { useState } from "react";
import axios from "axios";
import Button from '@material-ui/core/Button';
import { TextField } from '@material-ui/core';
import DisplayUpper from './DisplayUpper';


function Form() {
  const [inputText, setInputText] = useState("");
  const [fetchedData, setFetchedData] = useState("");
  const [isSubmitted, setSubmitted] = useState(false);
  

  const handleSubmit = (e) => {
   setSubmitted(true)
    
    console.log("button clicked");

    const config = {
      headers: {'Access-Control-Allow-Origin': '*'}
 

     };

    axios
      .post("http://localhost:5000/process", {
        inputText: inputText,
      }, config)
      .then((res) => {
        console.log("res", res);
        setFetchedData(res.data);
      })
      .catch((er) => {
        console.log(er);
      });
      
    }

    
  return (
    <div>
    <form onSubmit={handleSubmit} method="post">
      <label>
        Enter Text :
        <TextField multiline={true} variant="outlined"
          name="inputText"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
        />
      </label>
      <Button variant="contained" color="primary" type="submit" name="Submit">
        SUBMIT
      </Button>
    </form>
{isSubmitted && <DisplayUpper/>}
    </div> 
    );
    }


export default Form;

我设置了代理服务器：http://localhost:5000“在package.json中

反应表单组件代码：

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
app.debug = True
CORS(app)

@app.route('/process', methods=['POST'])
def result():
        text = request.form.get('inputText')
        upper_text = text.upper()
        print(upper_text)

        return upper_text

import React, { useState } from "react";
import axios from "axios";
import Button from '@material-ui/core/Button';
import { TextField } from '@material-ui/core';
import DisplayUpper from './DisplayUpper';


function Form() {
  const [inputText, setInputText] = useState("");
  const [fetchedData, setFetchedData] = useState("");
  const [isSubmitted, setSubmitted] = useState(false);
  

  const handleSubmit = (e) => {
   setSubmitted(true)
    
    console.log("button clicked");

    const config = {
      headers: {'Access-Control-Allow-Origin': '*'}
 

     };

    axios
      .post("http://localhost:5000/process", {
        inputText: inputText,
      }, config)
      .then((res) => {
        console.log("res", res);
        setFetchedData(res.data);
      })
      .catch((er) => {
        console.log(er);
      });
      
    }

    
  return (
    <div>
    <form onSubmit={handleSubmit} method="post">
      <label>
        Enter Text :
        <TextField multiline={true} variant="outlined"
          name="inputText"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
        />
      </label>
      <Button variant="contained" color="primary" type="submit" name="Submit">
        SUBMIT
      </Button>
    </form>
{isSubmitted && <DisplayUpper/>}
    </div> 
    );
    }


export default Form;

import React，{useState}来自“React”；
从“axios”导入axios；
从“@material ui/core/Button”导入按钮；
从“@material ui/core”导入{TextField}；
从“/DisplayUpper”导入DisplayUpper；
函数形式（）{
常量[inputText，setInputText]=useState（“”）；
常量[fetchedData，setFetchedData]=useState（“”）；
const[isSubmitted，setSubmitted]=使用状态（false）；
常量handleSubmit=（e）=>{
setSubmitted（真）
控制台日志（“点击按钮”）；
常量配置={
标题：{'Access-Control-Allow-Origin'：'*'}
};
axios
.post（“http://localhost:5000/process", {
输入文本：输入文本，
}，config）
。然后（（res）=>{
控制台日志（“res”，res）；
setFetchedData（res.data）；
})
.catch（（er）=>{
控制台日志（er）；
});
}
返回(
输入文本：
setInputText（e.target.value）}
/>
提交
{isSubmitted&&}
);
}
导出默认表单；

在本例中，Axis正在发送json数据，因此要访问该数据，可以使用

request.json

（而不是

request.form

）。用

request.json

替换

request.form

后，代码应该可以工作。

遗憾的是，这并没有解决问题。我做了text=request.json（'inputText'）。你是什么意思，你是说request.json（'inputText'）不起作用，还是真的起作用了（应该是request.json.get（'inputText'））非常感谢！我确实请求了.json.get（'inputText'），它正在工作。我非常感谢你。好几天都在这上面。如果你有时间，你能告诉我为什么request.form.get（'inputText'）不起作用吗？我以为我打axios电话时会从表单中获取inputText？您什么时候会改用request.form？无论如何，再次谢谢你。祝你一切顺利。欢迎光临！对于http请求，它们可以有不同的内容类型，Axis默认发送json（我相信它可以发送表单数据），request.form将用于html表单或表单内容类型。