我有一个使用 react-router
的 React 应用程序,所以它利用了 HTML5 历史 API,我试过 historyApiFallback
设置为 true
为 404 条路径提供服务 index.html
而不是返回 HTTP 响应。
该单页应用程序向远程 API 服务器发出一些请求,这就是为什么我还需要将一些请求代理到我在开发时也在运行的快速服务器。 Web React 应用程序在端口 3000 上提供服务,API 在端口 3001 上运行。
所以我试过:
devServer:{
contentBase: 'src/www', //Relative directory for base of server
devtool: 'eval',
hot: true, //Live-reload
inline: true,
port: 3000, //Port Number
host: 'localhost', //Change to '0.0.0.0' for external facing server
historyApiFallback: true,
proxy: {
'^\/users|sitters|bookings': {
target: 'http://127.0.0.1:3001',
rewrite: function(req) {
req.url = req.url.replace(/^\/api/, '');
}
}
}
},
devtool: 'eval',
output: {
path: buildPath, //Path of output file
filename: 'app.js'
},
因此,如果请求的路径以
/users
开头,我想要的是访问远程 api 服务器。或 /sitters
或 /bookings
但是去 historyApiFallback
(服务 index.html
)否则。当然,现在 historyApiFallback 始终为 HTML 文件提供服务,但我还需要代理正常工作。
最佳答案
免责声明。这个答案可能已经过时
在 Express 中间件中,堆栈顺序很重要。
代理应该首先在 webpack 配置中设置,而不是 historyApiFallback
,它应该是这样的:
devServer:{
contentBase: 'src/www', //Relative directory for base of server
devtool: 'eval',
hot: true, //Live-reload
inline: true,
port: 3000, //Port Number
host: 'localhost', //Change to '0.0.0.0' for external facing server
proxy: {
'^\/users|sitters|bookings': {
target: 'http://127.0.0.1:3001',
rewrite: function(req) {
req.url = req.url.replace(/^\/api/, '');
}
}
},
historyApiFallback: true
},
因此,当然可以根据应用程序需要将代理更改为任何模式或正则表达式。就我而言,这就是我所需要的。
关于webpack - 如何使用 historyApiFallback 和代理远程 api 请求来设置 webpack 开发服务器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36138936/