Express JS 404 - 前端向端点发出 POST 请求，但服务器没有定义路由来处理请求

Question

这是新的，所以 AiA。本质上，当单击“下一步”按钮时，我希望能够通过数据库中的存储过程运行查询，以检查电子邮件是否已存在，并返回 true/false。但是，我不断收到“请求失败，状态代码 404”错误，希望得到任何指点！

在我的 Typescript 文件中，单击“下一步”按钮运行 handleNext() 函数，该函数调用 checkEmailExists() 函数，该函数向 /checkEmail 端点发送和查询：

const handleNext = async () => {
    console.log("Next button is clicked");

    if (step === 1) {
      const emailExists = await checkEmailExists();
      if (emailExists) {
        setEmailError('This email is already registered. Sign in instead.');
        setIsEmailValidated(false);
      } else {
        setEmailError('');
        console.log(emailExists);
        console.log("Email doesn't already exist");
        setIsEmailValidated(true);
        setStep(2);
      }
    }
  };

const checkEmailExists = async () => {
    try {
      const response = await axios.post('/checkEmail', { email });
      console.log(response.data.exists);
      return response.data.exists;
    } catch (error) {
      console.error('Error checking email:', error);
    }
  };

在我的 Routes.js Express 文件中，我能够连接到数据库（所以我知道这不是问题）。这些是我的配置：

const app = express();
// Create MySQL database connection
const db = mysql.createConnection({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME
});

这是检查电子邮件是否存在的 API 端点，它在 /checkEmail 端点定义：

// API endpoint to check if email exists
app.post('/checkEmail', (req, res) => {
  const { email } = req.body;

  // Call the stored procedure
  db.query('CALL CheckValueExists(?, ?, ?, @result)', ['Person', 'Email', email], (err) => {
    if (err) {
      console.error('Error calling stored procedure:', err);
      res.status(500).json({ error: 'Error calling stored procedure' });
      return;
    }

    // Retrieve the result from the stored procedure
    db.query('SELECT @result AS exists', (err, result) => {
      if (err) {
        console.error('Error retrieving result:', err);
        res.status(500).json({ error: 'Error retrieving result' });
        return;
      }
      
      // Extract the exists value from the result
      const exists = result[0].exists === 1;
      res.status(200).json({ exists });
    });
  });
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

在我的数据库中，这是我的存储过程（我测试了它，所以我知道这不是问题）：

create
    definer = root@localhost procedure CheckValueExists(
    IN v_Tablename VARCHAR(100),
    IN v_ColumnName VARCHAR(100),
    IN v_Value VARCHAR(100),
    OUT v_Exists BOOLEAN
)
BEGIN
  DECLARE v_Count INT;

  SET @query = CONCAT('SELECT COUNT(*) FROM ', v_Tablename,
                      ' WHERE ', v_ColumnName, ' = ?');

  SET @v_Value = v_Value;

  PREPARE stat FROM @query;
  EXECUTE stat USING @v_Value;
  DEALLOCATE PREPARE stat;

  -- Get the count from the variable @count
  SELECT @count INTO v_Count;

  -- Set v_Exists based on the count
  IF v_Count > 0 THEN
    SET v_Exists = TRUE;
  ELSE
    SET v_Exists = FALSE;
  END IF;
END;

有谁知道为什么服务器没有定义路由来处理这个请求？我现在已经被这个问题难住了一段时间了。钛合金

Answer 1

您可以手动配置代理。 首先，安装

http-proxy-middleware

npm install http-proxy-middleware

接下来，创建

src/setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3004',
      changeOrigin: true,
    })
  );
};

然后

axios.post('api/checkEmail', { email });

如果这对您不起作用，那么我们会使用 Express 域直接调用 api。

axios.post('http://localhost:3004/checkEmail', { email });