使用 Redux 从 REACT 调用 API 的路由问题

Question

我已经用 Python (django restframework) 创建了 api。我正在使用 redux 从我的反应应用程序中调用 api。

当我这样调用它时它工作正常

   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/')

Answer 1

您需要将 url 交给 api。如果您不提供完整的 url，它将添加您的 React 应用程序 url.

你可以用路由声明一个变量

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

Answer 2

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

将上面的配置添加到你的webpack中，然后请求就可以被wepack开发服务器转发了。

更多详情，请访问https://webpack.js.org/configuration/dev-server/#devserverproxy

使用 Redux 从 REACT 调用 API 的路由问题

Routing Problem in calling API from REACT using Redux

javascript

api

django

reactjs