React 应用程序获取 POST 请求无法 GET / 使用 POST 命令时

Question

我正在使用 React 应用程序 - 运行 Node Index.js 时，我直接在浏览器上收到“无法 GET /”错误（我想直接运行它），尽管请求 POST 命令，但 GET 请求之前工作正常。

我正在关注本教程： https://youtu.be/bB7xkRsEq-g?t=1269

这似乎没有任何问题

App.js：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('http://localhost:3001/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ message })
    })
      .then(res => res.json())
      .then(data => setResponse(data.message))
      .catch(err => {
        console.log(err);
      });
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        ></textarea>
        <button type="submit">Submit</button>
      </form>
      <div>{response}</div>
    </div>
  );
}

export default App;

index.js：

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 3001;

app.use(bodyParser.json());

app.use(cors());

app.post('/', function(req, res){
    res.json({
        message: "Hello World"
    });
});


app.listen(port, () => {
    console.log(`Server running on localhost: ${port}`);
});

这是开发工具的屏幕截图，显示它正在尝试执行 GET 请求。 查看我的服务器日志后，我注意到没有发送 POST 请求。看来“fetch”函数忽略了指定的“method”参数。相反，无论我尝试指示它执行“POST”请求，它都会始终执行“GET”请求。

在这篇文章中也找不到有用的东西： React Native - 获取 POST 请求作为 GET 请求发送

Answer 1

您收到的错误消息来自 Express.js 应用程序。

您只允许在

POST

端点上使用

/

，这就是为什么您在尝试访问

/

时收到“无法获取/”错误的原因。

app.post('/', function(req, res){
    res.json({
        message: "Hello World"
    });
});