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

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

2 个答案: