Reactjs 反应：API调用后嵌入错误路径

我使用CRA react CLI创建了我的项目，并将数据存储在公用文件夹中的本地JSON文件中

我有一个

登录组件

。这就是我使用Axios进行所有

postapi

调用的地方，我还有一些其他的东西。此组件稍后将导入到

Auth Layout

中

问题是：提交时，它将

POST请求发送到错误的路径。它应该发送到
/data/api/v1/login.json，而不是发送到
http://localhost:3000/auth/data/api/v1/login.json

我认为这可能是因为
登录组件
正在从
auth布局
加载。但是，不知道如何解决它

登录组件

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";

//api calls
import axios from "axios";

import { setUserSession } from "../../Common/Utils/Common.js";

import { Button, Form, Input, InputGroup, InputGroupAddon } from "reactstrap";

const Login = (props) => {
  const [loading, setLoading] = useState(false);
  const username = useFormInput("");
  const password = useFormInput("");
  const [error, setError] = useState(null);

  const handleLogin = () => {
    setError(null);
    setLoading(true);
    axios
      .post("data/api/v1/login.json", {
        username: username.value,
        password: password.value,
      })
      .then((response) => {
        console.log("response", response);
        setLoading(false);
        setUserSession(response.data.token, response.data.user);
        props.history.push("/admin/dashboard");
      })
      .catch((error) => {
        setLoading(false);
        if (error.response.status === 401)
          setError(error.response.data.message);
        else setError("Something went wrong. Please try again later.");
      });
  };

  return (
    <div className="container-fluid backgroundContainer">
      <div className="Login">
        <div className="login-form-container">
          <div className="logo">
            <img src={Logo} className="App-logo" alt="logo" />
          </div>
          <div className="content">
            <Form className="login-form">
              <h3 className="form-title">Welcome</h3>
              <InputGroup>
                <InputGroupAddon
                  className="input-group-addon"
                  addonType="prepend"
                >
                  <i className="fa fa-user"></i>
                </InputGroupAddon>
                <Input
                  autoFocus
                  type="email"
                  aria-label="Username"
                  aria-describedby="username"
                  aria-invalid="false"
                  placeholder="Username or Email"
                  {...username}
                />
              </InputGroup>
              <InputGroup>
                <InputGroupAddon
                  className="input-group-addon"
                  addonType="prepend"
                >
                  <i className="fa fa-lock"></i>
                </InputGroupAddon>
                <Input
                  value={password}
                  placeholder="Password"
                  aria-label="password"
                  aria-describedby="password"
                  {...password}
                  // onChange={(e) => setPassword(e.target.value)}
                  type="password"
                />
              </InputGroup>
              <div className="form-actions">
                {error && (
                  <>
                    <small style={{ color: "red" }}>{error}</small>
                    <br />
                  </>
                )}
                <br />
                <button
                  className="pull-right"
                  block="true"
                  type="submit"
                  value={loading ? "Loading..." : "Login"}
                  onClick={handleLogin}
                  disabled={loading}
                >
                  Login
                </button>
                <br />
              </div>
              <div className="forgotPassword">
                <Link to="/auth/resetpassword">Forgot password?</Link>
              </div>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};

const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };
  return {
    value,
    onChange: handleChange,
  };
};

export default Login;

import React from "react";

import Login from "../../components/pages/login/Login";


class Pages extends React.Component {


  render() {
    return (
      <div className="wrapper wrapper-full-page" ref="fullPages">
        <div className="full-page">
          <Login {...this.props}></Login>
        </div>
      </div>
    );
  }
}

export default Pages;

您需要axios调用中的前导斜杠，更改

axios.post（“data/api/v1/login.json”{
用户名：username.value，
密码：password.value，
})

到

axios.post（“/data/api/v1/login.json”{
用户名：username.value，
密码：password.value，
})

这将解决将子路径添加到api调用中的问题。
您需要axios调用中的前导斜杠，请更改

axios.post（“data/api/v1/login.json”{
用户名：username.value，
密码：password.value，
})

到

axios.post（“/data/api/v1/login.json”{
用户名：username.value，
密码：password.value，
})

这将解决将子路径添加到api调用中的问题

// return the user data from the session storage
export const getUser = () => {
    const userStr = sessionStorage.getItem('user');
    if (userStr) return JSON.parse(userStr);
    else return null;
  }

  // return the token from the session storage
  export const getToken = () => {
    return sessionStorage.getItem('token') || null;
  }

  // remove the token and user from the session storage
  export const removeUserSession = () => {
    sessionStorage.removeItem('token');
    sessionStorage.removeItem('user');
  }

  // set the token and user from the session storage
  export const setUserSession = (token, user) => {
    sessionStorage.setItem('token', token);
    sessionStorage.setItem('user', JSON.stringify(user));
  }