React开发模式中的代理不会重定向

Question

我正在用create-react-app构建一个应用程序。我让本地Apache服务器在端口80上运行，以执行我的后端API PHP脚本。

我已经在我的package.json中添加了"proxy": "http://localhost:80"，但是在这个axios请求中：

 getAllCategories = () => {
      const url = process.env.PUBLIC_URL+`/api/api/categories/categories.php`; 
      axios.get(url)
        .then(res => {
        const categories = res.data.data;
        this.setState({ categories });
      }).catch(err => {
        console.log('Axios fetch error:',err);
      })
    }

我的请求被定向到

Request URL: http://localhost:3000/api/api/categories/categories.php

根据Chrome Devtools，我没有得到所需的数据。

在远程服务器的build模式下，指定的路径一切正常。

如何在dev模式下配置proxy来访问我的API文件？

Answer 1

你累过这样的路吗？

axios.get(`/api/api/categories/categories.php`)
...

Answer 2

如果您使用的是create-react-app，请安装http-proxy-middleware作为开发依赖项，并在您的src文件夹中创建一个名为setupProxy.js的文件(它的拼写必须与之完全相同)。

在该文件中：

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:80' }));
};

您需要重新启动应用程序才能使其生效。您的应用编程接口调用不应该需要process.env