React前端向Python Flask后端传数据遇405错误，寻求解决方案

我需要把React网页搜索栏的单个字符串数据发送给Python代码作为输入，用Flask实现时一直碰到405（方法不允许）错误，已经卡了两天，求助。

Flask后端原代码 #

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


app = Flask(__name__)
cors = CORS(app)

@app.route('/receiver', methods = ['POST'])
def postME():
    data = request.get_json()
    #data = jsonify(data)
    print(data.json())
    return data
    
    
if __name__ == "__main__":
    app.run(debug=True)

React前端原代码 #

import React, {useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';
    
function App(){
    
    const [query, setQuery] = useState('');
    const updateSearch = e => {
        setQuery(e.target.value);
        //console.log(query);
    }
        
    const [atID, setAtID] = useState('vangyachibhaji');
    
    useEffect(() => {
        console.log(query);
    }, [atID])
    
    const searchID = e => {
        e.preventDefault();
        setAtID(query);
        console.log("query: " + query);
        setQuery('');
        postToPython();
    }
    const postToPython = () => {
        fetch("http://127.0.0.1:5000/receiver", 
            {
                method: 'post',
                headers: {
                    'Content-type': 'application/json',
                    'Accept': 'application/json'
                },
            // Strigify the payload into JSON:
            body:JSON.stringify(query)}).then(res=>{
                    if(res.ok){
                        return res.json()
                    }else{
                        alert("something is wrong")
                    }
                }).then(jsonResponse=>{
                    
                    // Log the response data in the console
                    console.log(jsonResponse)
                } 
                ).catch((err) => console.error(err));
                
               } 
        
    
        return(
            <div className='Search-bar'>
                <form className = 'search-form' onSubmit={searchID}>
                    <input type="text" placeholder='search' onChange={updateSearch}/>
                    <button >search</button>
                </form>
            </div>
        );
    }
    
    export default App;

问题分析与修复方案 #

1. Flask后端错误修复

• request.get_json()已经将请求体解析为Python字典，调用data.json()会抛出AttributeError（字典无此方法），导致请求处理失败，这是引发异常响应的核心原因。
• Flask不能直接返回字典，必须用jsonify()包装后返回，否则会返回500错误。

修改后的Flask代码：

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


app = Flask(__name__)
cors = CORS(app)

@app.route('/receiver', methods=['POST'])
def postME():
    data = request.get_json()
    print(data)  # 直接打印解析后的JSON数据
    return jsonify(data)  # 用jsonify包装后返回
    
if __name__ == "__main__":
    app.run(debug=True)

2. React前端错误修复

• 原代码发送纯字符串格式的请求体，Flask的request.get_json()无法正确解析，导致请求异常。需将字符串包装为标准JSON对象发送。
• HTTP方法规范建议大写'POST'，避免部分环境的兼容性问题。

修改后的React前端postToPython函数：

const postToPython = () => {
    fetch("http://127.0.0.1:5000/receiver", 
        {
            method: 'POST', // 改为大写规范写法
            headers: {
                'Content-type': 'application/json',
                'Accept': 'application/json'
            },
            // 将字符串包装为JSON对象发送
            body: JSON.stringify({ query: query })
        }).then(res=>{
                if(res.ok){
                    return res.json()
                }else{
                    alert("请求出错")
                }
            }).then(jsonResponse=>{
                console.log(jsonResponse)
            } 
            ).catch((err) => console.error(err));
}

3. 额外检查项

• 确保已安装flask-cors：执行pip install flask-cors，否则跨域请求会被浏览器拦截。
• 确认React服务（默认3000端口）和Flask服务（默认5000端口）均正常启动，无端口冲突。

内容的提问来源于stack exchange，提问作者Yasho Bapat