Проблема маршрутизации при вызове API из REACT с помощью Redux

Я создал api с помощью Python (django restframework). Я вызываю этот api из моего приложения react, используя redux.

Он работает нормально, когда я вызываю его следующим образом

   const {data} = await axios.get(`http://127.0.0.1:8000/api/products/${id}`)

но когда я меняю url на

    const {data} = await axios.get(`api/products/${id}`)

Затем он делает запрос на другой маршрут (http://localhost:3000/product/api/products/6), и я хочу, чтобы он сделал вызов на (http://localhost:8000/api/products/6

).

Я добавил путь в сервер django и разрешил вызовы из приложения react. и он работает отлично, когда я работал с другими маршрутами.

например, он работал нормально, когда я звонил на этот маршрут

const {data} = await axios.get('api/products/')

Вам нужно указать url для api. Если вы не укажете полный url, он добавит url вашего приложения react.

Вы можете объявить переменную с помощью маршрута

API_URL = "http://localhost:8000/"
const {data} = await axios.get(`${API_URL}api/products/${id}`)

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
         target: 'http://127.0.0.1:8000',
         changeOrigin: true,
      },
    },
  },
 };

Добавьте вышеуказанную конфигурацию в ваш webpack, после чего запрос может быть перенаправлен сервером wepack dev.

Подробнее, пожалуйста, посетите https://webpack.js.org/configuration/dev-server/#devserverproxy

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