无法让代理在 create-react-app/webpack 中工作

Question

我正在尝试为使用 create-react-app 制作的 React 应用设置 localhost 开发服务器。该应用程序的一部分向 PHP 文件发出了一些简单的fetch 请求，以检索和更新数据（使用 SleekDB）。

通过npm run build 制作的build 版本在部署服务器上运行良好，但因为每次更改PHP 文件时运行npm run build 会很痛苦，因此我尝试设置本地服务器。

我已经安装了 XAMPP，设置了 documentRoot 并使用 localhost:80/php/getTasks.php 就像一个魅力。令人毛骨悚然的原因是试图让 localhost:3000 上的反应开发服务器对 localhost:80 进行代理调用。以下函数调用的是 3000，而不是 80，因此返回的是 PHP 脚本的内容。

react 中获取请求

        const fetchTasks = async () => {
            const res = await fetch("php/getTasks.php", {
                method: "GET",
                mode: "cors",
                headers: {"Content-type": "application/json", "Accept": "application/json"}
            })
            console.log(await res.text())
            // return await res.json();
        }
        await fetchTasks();
        // const tasksFromServer = await fetchTasks()
        // console.log(tasksFromServer)
        // setTasks(tasksFromServer.map((x, i) => x.id ? x : {...x, id: i + 1}))
    }

getTasks.php 如果直接在 http://localhost:80/php/getTasks.php 调用，则可以工作

require_once("./dbInit.php");
echo json_encode($tasksStore->findAll());

这是一个常见的话题，我花了几个小时浏览了几十个帖子，但都没有运气。到目前为止，我已经尝试过：

• 按照docs 将"proxy": "http://localhost:80/public" 添加到我的package.json 文件中
• 将更详细的devServer 对象添加到webpack.config.js（下）
• 将更详细的proxy 对象添加到webpackDevServer.config.js（下）
• 将method: "GET", mode: "cors",headers: {"Content-type": "application/json", "Accept": "application/json" 添加到GET 请求中
• 配置中的各种路径

到目前为止，唯一可行的是将fetch URL 更改为绝对http://localhost:80/public/php/getTasks.php，这将使编译变得很痛苦

我一定遗漏了一些非常明显的东西，但这种发展水平对我来说是新的，我正在努力找出我做错了什么。谁能帮帮我？

webpack.config.json 插入到exports()的顶层

            historyApiFallBack: true,
            // progress: true,
            hot: true,
            inline: true,
            // https: true,
            port: 3000,
            // contentBase: path.resolve(__dirname, 'public'),
            proxy: {
                '/php/': {
                    target: 'http://localhost:80/public/php',
                    secure: false,
                    changeOrigin: true
                },
                'php/*': {
                    target: 'http://localhost:80/public/php',
                    secure: false,
                    changeOrigin: true
                },
                'php/': {
                    target: 'http://localhost:80/public/php',
                    secure: false,
                    changeOrigin: true
                },
                '/php/*': {
                    target: 'http://localhost:80/public/php',
                    secure: false,
                    changeOrigin: true
                },
                'http://localhost:3000/php/*': {
                    target: 'http://localhost:80/public/php',
                    secure: false,
                    changeOrigin: true
                },
                'http://localhost:3000/php/': {
                    target: 'http://localhost:80/public/php',
                    secure: false,
                    changeOrigin: true
                }
            }

webpackDevServer.config.js 替换proxy

// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
    proxy: {
      '/php': {
        target: 'http://localhost:80/public',
        pathRewrite: {'/php': 'http://localhost:80/public/public/php'},
        secure: false,
        changeOrigin: true,
        ws: true
      },
      './php': {
        target: 'http://localhost:80/public',
        pathRewrite: {'/php': 'http://localhost:80/public/public/php'},
        secure: false,
        changeOrigin: true,
        ws: true

      },
      'php': {
        target: 'http://localhost:80/public',
        pathRewrite: {'/php': 'http://localhost:80/public/public/php'},
        secure: false,
        changeOrigin: true,
        ws: true
      },
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Origin, Methods, Content-Type",
        "Access-Control-Allow-Methods": "GET",
        "Access-Control-Allow-Methods": "POST",
      },
    }

Answer 1

按照article中的步骤，终于弄明白了。

Tl;dr

运行npm install http-proxy-middleware --save

在create-react-appsrc文件夹中创建一个文件setupProxy.js

在setupProxy.js 添加以下代码，更改'/php、'http://localhost:80 和pathRewrite 部分以匹配您的项目

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/php',
        createProxyMiddleware({
            target: 'http://localhost:80',
            changeOrigin: true,
            secure: false,
            pathRewrite: {
                '^/php': '/public/php'
            }
        })
    );
};