尝试通过表单数据发布上传屏幕截图时遇到“无法发布”错误 - 如何解决？

Question

我在尝试通过 React 应用程序中的表单数据发布上传屏幕截图时遇到问题。这是场景：

我有一个简单的 React 表单，用于收集用户的数据，包括用于上传屏幕截图的文件输入字段。提交后，表单数据将发送到我的使用 Express.js 构建的 Node.js 后端服务器，进行处理并存储在数据库表中。

但是，当我提交表单时，我没有成功上传数据和屏幕截图，而是看到“无法发布”错误屏幕。此错误扰乱了我的应用程序的预期流程

// 这是表单代码

import React, { useState } from "react";
import axios from "axios";
const App = () => {
  const [formData, setFormData] = useState('');
  const handleSubmit = async () => {
    try {
      const response = await axios.post('/api/data', { data: formData });
      console.log(response.data);
    }
    catch (error) {
      console.log('Error: ', error);
    }

  };
  return (
    <div>
      <form action="" method="POST">
        <input type="text" value={formData} onChange={(e) => setFormData(e.target.value)} /><br />
        <button onClick={handleSubmit}>Submit</button>
      </form>
    </div>
  );
};
export default App;re

//这是后端代码

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');

const app = express();
const port = 3001;

app.use(bodyParser.json());

// Create connection to the database
var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '', // Enter your MySQL Password here
    database: 'mydb'
});

connection.connect();

//Create operation (POST)
app.post('/api/data', (req, res) => {
    const { data } = req.body;
    const sql = 'INSERT INTO mytable(Name)value(?)';
    connection.query(sql, [data], (err, result) => {
        if (err) {
            console.log("Error inserting data", err);
            res.status(500).json({ err: 'Failed to insert data' });
            return;
        }
        console.log('Data inserted: ', result);
        res.json({ message: 'Data inserted successfully.' });
    });
});
app.listen(port, () => console.log(`Server running on port ${port}`));

Answer 1

const response = await axios.post('http://localhost:3001/api/data', { data: formData });

或者您需要在前端设置代理来连接后端3001端口。

像这样在 package.json 文件中添加以下代码。

"proxy": "http://localhost:3001"