404 Not Found when trying to call API

Question

我是 React 的新手，我试图从后端 API 获取所有客户列表，但它抛出了错误 404 not found 错误。仅供参考，没有令牌我无法使用 API，我想这就是问题所在？ Perharps 我错误地获得了令牌？我将不胜感激任何帮助，我可以发布您想要查看的代码的任何部分。

customerService.js

import axios from "axios";

const API_URL = "http://localhost:8000/api/v1/customer/create-customers";

const user = JSON.parse(localStorage.getItem("user"));
const { token } = user || undefined;

//Create new customer
const createCustomer = async (customerData) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  const response = await axios.post(API_URL, customerData, config);

  return response.data;
};

const autoGenerate = async (generate_customers) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  const response = await axios.post(
    "http://localhost:8000/api/v1/customer/generate-customers",
    generate_customers,
    config
  );
  return response.data;
};

const getAllCustomers = async (token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  const response = await axios.get(
    "http://localhost:8000/api/v1/customer/getAllCustomers",
    config
  );
  return response.data;
};

const getSingleCustomer = async (uid, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };

  const response = await axios.get(
    `http://localhost:8000/api/v1/customer/get-customer/${uid}`,
    config
  );

  return response.data;
};

const editCustomer = async (uid, customerData, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };

  const response = await axios.put(API_URL, uid, customerData, config);

  return response.data;
};

const customerService = {
  createCustomer,
  autoGenerate,
  getAllCustomers,
  getSingleCustomer,
  editCustomer,
};

export default customerService;

customerSlice.js
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import customerService from "./customerService";

const initialState = {
  customer: [],
  autoCustomer: [],
  customers: [],
  isLoading: false,
  isError: false,
  isSuccess: false,
  message: "",
};

// Create new customer
export const createCustomer = createAsyncThunk(
  "customer/createCustomer",
  async (customer, thunkAPI) => {
    try {
      const token = thunkAPI.getState().auth.user.token;
      return await customerService.createCustomer(customer, token);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

// Generate new customer
export const autoGenerate = createAsyncThunk(
  "customer/autoGenerate",
  async (generate_customer, thunkAPI) => {
    try {
      const token = thunkAPI.getState().auth.user.token;
      return await customerService.autoGenerate(generate_customer, token);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

// Get all customers
export const getAllCustomers = createAsyncThunk(
  "customer/getAllCustomers",
  async (_, thunkAPI) => {
    try {
      const token = thunkAPI.getState().auth.user.token;
      return await customerService.getAllCustomers(token);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

// Get single customer
export const getSingleCustomer = createAsyncThunk(
  "customer/getSingleCustomer",
  async (uid, thunkAPI) => {
    try {
      const token = thunkAPI.getState().auth.user.token;
      return await customerService.getSingleCustomer(uid, token);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

// Edit customer
export const editCustomer = createAsyncThunk(
  "customer/",
  async (uid, customerData, thunkAPI) => {
    try {
      const token = thunkAPI.getState().auth.user.token;
      return await customerService.editCustomer(uid, customerData, token);
    } catch (error) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();
      return thunkAPI.rejectWithValue(message);
    }
  }
);

export const customerSlice = createSlice({
  name: "customer",
  initialState,
  reducers: {
    reset: (state) => {
      (state.isLoading = false),
        (state.isSuccess = false),
        (state.isError = false),
        (state.message = "");
    },
  },

  extraReducers: (builder) => {
    builder
      .addCase(createCustomer.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(createCustomer.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        state.customer.push(action.payload);
      })
      .addCase(createCustomer.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.error.message;
      })

      .addCase(autoGenerate.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(autoGenerate.fulfilled, (state, action) => {
        state.isLoading = true;
        state.isSuccess = true;
        state.autoCustomer = action.payload;
      })
      .addCase(autoGenerate.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.error.message;
      })

      .addCase(getAllCustomers.pending, (state) => {
        state.isLoading = true;
        state.isError = false;
      })
      .addCase(getAllCustomers.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isError = false;
        state.customers = action.payload.payload;
      })
      .addCase(getAllCustomers.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.error.message;
      })

      .addCase(getSingleCustomer.pending, (state) => {
        state.isLoading = true;
        state.isError = false;
      })
      .addCase(getSingleCustomer.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isError = false;
        state.customer = action.payload.payload;
      })
      .addCase(getSingleCustomer.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.error.message;
      }
  },
});

export const { reset } = customerSlice.actions;
export default customerSlice.reducer;

我会喜欢任何提示。谢谢