反应 404 Axios 无法发布

Question

Axios 的新手和作为后端的 Node - 继承了 React 中的一些登录页面代码，我试图弄清楚为什么我不能向后端发送POST 。

这是我的 .env 文件：

REACT_APP_BACKEND_URL=http://localhost:3000/admin

还有一个名为API.js的文件

import axios from "axios";

// Set config defaults when creating the instance

export const CompanyAPI = () => {
  let api = axios.create({
    baseURL: process.env.REACT_APP_BACKEND_URL,

    timeout: 10000,
    headers: {
      "Content-Type": "application/json",
    },
  });

  return api;
};

然后是一个LoginPage.js ：

export const LoginPage = () => {
  const API = CompanyAPI();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const getAuth = (e) => {
    e.preventDefault();
    API.post("/auth/login", {
      email: email,
      password: password,
    })
      .then(async (response) => {
        if (response.status === 200) {
          await localStorage.setItem("jwt_key_admin", response.data.token);

          setTokenKey(response.data.token);
          setIsAuth(true);
          navigate("/");
        }
      })
      .catch((error) =>
        alert(
          "Login Failed"
        )
      );
  };

我的问题是，是否有关于如何使用express处理/auth/login端点并补充现有API.js文件的示例？

Answer 1

基本上我从这段代码中看到的是：

• 创建了一个 axios 实例，baseURL 设置为http://localhost:3000/admin

• 乍一看，我可以告诉您所有 Api 调用导致404原因是本地 React将始终在端口 3000上运行，除非该端口正在使用中。

• 所以现在你的 axios baseURL 被设置为端口 3000肯定 axios 应该返回 404 因为你肯定没有你试图点击的端点

解决方案：

• 这里你要将 baseURL 的端口号更改为 Nodejs 服务器正在侦听的端口

• 然后一旦说完并完成，然后确保即使您尝试访问的端点确实存在，那么您的 axios 调用现在应该可以工作

建议：

• 如果创建的 Axios 实例令人困惑，请稍微删除它并导入原始 axios 而不是实例，然后以其基本形式使用 axios 然后一旦你有了这个工作，你肯定会建立正确的端口号和一切然后你可以编辑 axios 实例使用您已建立的 baseURL 创建。

Answer 2

添加

"proxy":"http://localhost:3000/admin"

在您的 package.json 文件中并重新启动您的 React App。