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

Question

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

我添加了 "proxy": "http://localhost:80" 给我的package.json, 但在这个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 模式下，这些路径都可以正常工作。

如何在开发模式下配置代理来访问我的 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' }));
};

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