axios 发布请求得到 404

问题描述 投票:0回答:0

尝试了所有在线解决方案,但它不适合我。

我试图在我的帖子请求中将 console.log 放在行之间,

但它什么也没显示,

也没有得到响应对象,

所以我想一定是有什么东西阻止了我发送请求,

安装了 axios cors,

在表单标签内有注册按钮,

在表单上得到方法=“post”,

也尝试过不使用绝对路径,

请帮帮我 卡在这里好几天了

下方来自注册页面

import React from "react";
import axios from "axios";
import { useRef } from "react";
import makeToast from "../Toaster";

const RegisterPage = (props) => {
  const usernameRef = useRef();
  const passwordRef = useRef();
  const emailRef = useRef();

  const handleRegister = () => {
    const username = usernameRef.current.value;
    const password = passwordRef.current.value;
    const email = emailRef.current.value;

    axios
      .post(
        "/register",
        {
          username,
          password,
          email,
        },
        { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
      )
      .then((response) => {
        makeToast("success", response.data.message);
        props.history.push("/login");
      })
      .catch((err) => {
        console.log(err.name);
        console.log(err.message);
        makeToast("error", err.message);
      });
  };

  return (
    <div className="inputSession">
      <div className="inputContainer">
        <div className="inputDetail">
          <form method="post">
            <div className="inputDetail">
              <label htmlFor="username">username</label>
              <input
                type="text"
                name="username"
                id="username"
                placeholder="please input your username"
                ref={usernameRef}
              ></input>
            </div>
            <div className="inputDetail">
              <label htmlFor="password">password</label>
              <input
                type="password"
                name="password"
                id="password"
                placeholder="please input your password"
                ref={passwordRef}
                autoComplete="off"
              ></input>
            </div>
            <div className="inputDetail">
              <label htmlFor="email">email</label>
              <input
                type="email"
                name="email"
                id="email"
                placeholder="please input your email"
                ref={emailRef}
              ></input>
            </div>
            <button onClick={handleRegister}>register</button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default RegisterPage;

下面来自 app.js

import BloggerPage from "./Pages/BloggerPage";
import ChatroomPage from "./Pages/ChatroomPage";
import DashboardPage from "./Pages/DashboardPage";
import LoginPage from "./Pages/LoginPage";
import PhotoPage from "./Pages/PhotoPage";
import RegisterPage from "./Pages/RegisterPage";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path="/register" element={<RegisterPage />}></Route>
        <Route exact path="/login" element={<LoginPage />}></Route>
        <Route exact path="/photo" element={<PhotoPage />}></Route>
        <Route exact path="/blogger" element={<BloggerPage />}></Route>
        <Route exact path="/dashboard" element={<DashboardPage />}></Route>
        <Route exact path="/chatroom" element={<ChatroomPage />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

another pic related to the detailed of the error

node.js api post axios
© www.soinside.com 2019 - 2024. All rights reserved.