Flask+React TS应用提交请求时出现404错误求助

项目目录结构 #

react-flask-app
|-backend/
|---|-app.py
|-frontend/
|---|-node_module/
|---|-public/
|---|-src/
|------|-App.css
|------|-App.tsx
|------|-index.css
|------|-main.tsx
|------|-vite-env.d.ts
|---|-index.html
|---|-package-lock.json
|---|-package.json
|---|-tsconfig.json
|---|-tsconfig.node.json
|---node-module/

后端代码（backend/app.py） #

from flask import Flask, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins="http://localhost:3000")


@app.route('/')
def index():
    return 'Welcome to the Flask backend!'


@app.route('/signup', methods=['POST'])
def signup():
    data = request.form
    username = data['username']
    password = data['password']
    print(f"Received data: Username - {username}, Password - {password}")

    return "Data received successfully!"


if __name__ == '__main__':
    app.run()

前端代码（frontend/src/App.tsx） #

import React, { useState } from 'react';
import axios from 'axios';

const App: React.FC = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();

    try {
      await axios.post('/signup', { username, password });
      console.log('Request sent successfully!');
    } catch (error) {
      console.error('Error occurred while sending the request:', error);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="username">Username:</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(event) => setUsername(event.target.value)}
          />
        </div>
        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

当前问题与测试情况 #

• frontend/package.json已配置"proxy": "http://localhost:5000"，但前端提交表单时请求仍指向前端服务地址（如192.168.40.30:5173/signup），出现404错误。
• 使用curl测试后端API正常：curl -X POST -d "username=Jennetta&password=George" http://localhost:5000/signup 返回Data received successfully!。

解决步骤 #

1. 修正Vite代理配置（核心问题） #

Vite不支持在package.json中配置proxy，需在vite.config.ts中设置代理规则：
在frontend目录下创建/修改vite.config.ts：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/signup': {
        target: 'http://localhost:5000',
        changeOrigin: true
      }
    }
  }
})

修改后重启前端服务（npm run dev），代理会自动将/signup请求转发到http://localhost:5000/signup。

2. 修正CORS跨域配置 #

后端CORS当前只允许http://localhost:3000，但前端运行在5173端口，需更新允许的origin：

# 修改app.py中的CORS初始化代码
CORS(app, origins=["http://localhost:5173", "http://192.168.40.30:5173"])

开发环境也可临时用CORS(app)允许所有跨域请求（生产环境不建议）。

3. 统一请求数据格式 #

后端用request.form接收表单数据，但前端Axios默认发送JSON格式，会导致后端无法解析数据（即使代理成功也可能报错），二选一修改：

方案A：前端用FormData发送数据

修改App.tsx中的handleSubmit：

const handleSubmit = async (event: React.FormEvent) => {
  event.preventDefault();
  const formData = new FormData();
  formData.append('username', username);
  formData.append('password', password);
  try {
    await axios.post('/signup', formData);
    console.log('Request sent successfully!');
  } catch (error) {
    console.error('Error occurred while sending the request:', error);
  }
};

方案B：后端改为接收JSON数据

修改app.py中的signup接口：

@app.route('/signup', methods=['POST'])
def signup():
    data = request.get_json()
    username = data['username']
    password = data['password']
    print(f"Received data: Username - {username}, Password - {password}")
    return "Data received successfully!"

内容的提问来源于stack exchange，提问作者ai.jennetta