Axios делает запрос по другому адресу

привет ребята, я здесь новенький надеюсь у всех все хорошо, в настоящее время я работаю над стеком сайта электронной коммерции: Django + DRF для backend и react/redux для front, я наткнулся на проблему, axios делает запрос на получение данных на неправильный url. Если вы посмотрите на App.js ниже, вы увидите, что второй маршрут, который рендерит компонент ProductPage, это "/product/:id"

function App() {
  return (
    <Router>
      <>
        <main style={{ height: '90vh' }}>
          <Header />
          <Routes>
            <Route path="/" element={<HomePage />} exact />
            <Route path="/product/:id" element={<ProductPage />} />
          </Routes>
        </main>
        <Footer />
      </>
    </Router>
  );
}

Я также реализовал redux, мое действие выглядит следующим образом:

export const listProductDetails = (id) => async dispatch => {
    try {
      dispatch({ type: PRODUCT_DETAILS_REQUEST });
  
      const { data } = await axios.get(`api/products/${id}`);
  
      dispatch({ type: PRODUCT_DETAILS_SUCCESS, payload: data });
    } catch (error) {
      dispatch({
        type: PRODUCT_DETAILS_FAIL,
        payload:
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message,
      });
    }
  };

посмотрите на url, к которому axios делает запрос. У меня также есть прокси в моем файле package.json:

{
  "name": "frontend",
  "proxy": "http://127.0.0.1:8000",

поэтому axios должен делать запрос, например, к "/api/products/2", но по какой-то причине запрос делается к "product/api/products/2"

Любые отзывы были бы очень признательны. спасибо, ребята

Вернуться на верх