反应端口 localhost//3001/login not found

问题描述

我正在尝试通过 axios 发出发布请求，但它不起作用，控制台日志错误显示未找到 react localhost//3001/login。

这是我的主要登录页面：

import React,{ useState } from "react";
import { Form,Button } from "react-bootstrap";
import touristusermodel from "../../models/User/user";
import { Link,useHistory } from "react-router-dom";
import { Sign_in } from "../../dao/firebase";
import UserType from "../../config/config";
import { checkNull } from "../../helpers/data-type-check";
import executeEndpoint from "../../dao/api";
import routes from "../../routes/routes";

function Login(props) {
  const history = useHistory();
  const [userLoginData,setuserLoginData] = useState(touristusermodel);

  function handleUser(e) {
    setuserLoginData({
      ...userLoginData,[e.target.name]: e.target.value,});
  }

  const SignIn = (e) => {
    e.preventDefault();
    Sign_in(userLoginData,(response) => {
      setuserLoginData({ ...userLoginData,_id: response.user.uid });

      if (checkNull(response)) {
        executeEndpoint({
          method: 'post',url: routes.api.tourist.data.url,data: {
            ...userLoginData,_id: response.user.uid,},onResponse: (response) => {
            const { ...data } = response.data;
            console.log(data);
            if (data.user_type === UserType.tourist) {
              history.push(routes.web.tourist.path);
            } else if (data.user_type === UserType.guide) {
              history.push(routes.web.guide.path);
            } else {
              history.push(routes.web.post.path);
            }
          },onError: (error) => {
            console.log(JSON.stringify(error));
          },});
      }
    });
  };

  return (
    <div>
      <Form onSubmit={SignIn}>
        <Form.Group controlId="formBasicEmail">
          <Form.Label> Enter Email </Form.Label>{" "}
          <Form.Control
            type="text"
            value={userLoginData.tourist_email}
            placeholder="Enter Email"
            name={"email"}
            onChange={handleUser}
          />{" "}
        </Form.Group>{" "}
        <Form.Group controlId="formBasicEmail">
          <Form.Label> Enter Password </Form.Label>{" "}
          <Form.Control
            type="text"
            value={userLoginData.tourist_password}
            placeholder="Enter Password"
            name={"password"}
            onChange={handleUser}
          />{" "}
        </Form.Group>{" "}
        <Button variant="primary" type="submit">
          Login{" "}
        </Button>{" "}
      </Form>{" "}
    </div>
  );
}

export default Login;

api 组件

import axios from "axios";
import ApiParams from "../models/api/api-params";

/**
 *
 * @param {ApiParams} apiparams
 *
 */
// const method = ''; const url = ''; const data = {}; const onResponse= ({}) => {}; const onError = ({}) => {};
const executeEndpoint = async (apiparams) => {
  const { method,url,data,onResponse,onError } = ApiParams;

  const config = {
    method: method,url: url,headers: {
        'Content-Type': 'application/json'
    },data: data,};

  axios(config)
    .then(function (response) {
      onResponse(response);
    })
    .catch(function (error) {
      onError(error);
    });
};

export default executeEndpoint;

路线

import Post from "../pages/admin/post/post";
import Login from "../pages/auth/login";
import Registration from "../pages/auth/registration";
import GuidePage from "../pages/guide/guide";
import TouristPage from "../pages/tourist/tourist";

const Routes = {
  web: {
    registration: {
      path: "/registration",component: <Registration />,login: {
      path: "/login",component: <Login />,post: {
      path: "/post",component: <Post />,tourist: {
      path: "/tourist",component: <TouristPage />,guide: {
      path: "/guide",component: <GuidePage />,api: {
    tourist: {
      create: {
        url: "http://localhost:3000/tourist/create",data: {
        url: "http://localhost:3000/tourist/get",country: {
      fetch:{
        url:"http://localhost:3000/country/get"
      }
    },Place:{
      create:{
        url:"http://localhost:3000/place/create"
      }
    }
  },};

export default Routes;


const ApiParams = {
    method: "",url: "",data: {},onResponse: ({}) => {},onError: ({}) => {}
}

export default ApiParams

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）