无法让代理在创建反应应用程序/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上的react dev服务器对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());

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

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

到目前为止，唯一有效的方法是将fetchURL更改为绝对的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

按照本文中的步骤最终解决了这个问题。

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'
}
})
);
};