React: POST API 调用嵌入错误路径

Question

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

我有一个Login Component。这是我使用 Axios 进行所有 POST API 调用的地方，我还有一些其他的东西。该组件稍后被导入 Auth Layout.

问题是：在提交时，它将 POST request 发送到错误的路径。它应该发送到 /data/api/v1/login.json 而不是发送到 http://localhost:3000/auth/data/api/v1/login.json.

我认为这可能是因为 login component 是从 auth layout 加载的。但是，不确定如何解决它。

登录组件

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;

Common.js 这是 login component.

中常用的服务

// 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));
  }

Answer 1

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

axios.post("data/api/v1/login.json", { username: username.value, password: password.value, })

到

axios.post("/data/api/v1/login.json", { username: username.value, password: password.value, })

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

React: POST API 调用嵌入错误路径

React: POST API call embedding wrong path

layout

reactjs

axios

react-component