javascript - 如何在 create-react-app 中设置代理表
问题描述
我有一个 API 后端服务器,前端由另一个创建的服务器提供服务create-react-app
,我需要将一组特定的请求从 CRA 服务器代理到 API 服务器。
我正在尝试使用http-proxy-middleware
. 对于只有一个规则的简单用例,它工作得很好。但是一次使用多个规则我没有运气。
我一直在关注文档并提出了类似的内容(内容setupProxy.js
)。
const proxy = require('http-proxy-middleware');
const proxyTable = {
'/auth/google': 'http://localhost:5000/',
'/api/*': 'http://localhost:5000'
};
const options = {
target: 'http://localhost:3000',
router: proxyTable
};
module.exports = function(app) {
app.use(proxy(options));
};
首先,我不知道中的target
属性,options
但根据文档,它为每个未在proxyTable
. 好吧,我只想让我的所有其他请求保持不变,所以我将值设置为与 CRA 运行的地址相同(不确定这是否是正确的方法,文档对此不清楚)。
我遇到的问题是,如果我尝试将请求路由回去,则会出现此错误。
Error occurred while trying to proxy request / from localhost:3000 to http://localhost:3000 (EADDRNOTAVAIL)
我不确定我是否理解这个错误。如果我更改值,target
则会出现与此类似的其他一些错误消息,并且注意到似乎有效。
任何帮助,将不胜感激。
解决方案
好的,我通过多次使用代理中间件找到了解决方法——每个规则一个。
对于任何有兴趣的人,
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api/*', { target: 'http://localhost:5000' }));
app.use(proxy('/auth/google', { target: 'http://localhost:5000' }));
};
但是代理表仍然无法正常工作,所以任何知道如何使其工作的人,请分享。
推荐阅读
- javascript - 如何在 React-Native 中的 Pressable 中处理 ScrollView?
- vba - 如何创建一系列电子邮件,在文件夹中附加文件,同时限制附加到任何一封电子邮件的文件数量?
- visual-studio - 使用 Visual Studio 2019 16.10 或更高版本构建时,已发布的 Xamarin UWP 应用在启动时崩溃
- google-cloud-platform - Cloud Build 在 Queued 中的工作池中构建
- java - 在一种方法中循环通过 ObjectInputStream 并在主方法中打印整个文件,但遇到 EOF 无法正常工作或出错的问题
- docker - 在加密的 llvm 分区上挂载卷时出现 Docker 权限问题?
- java - Jenkins 上的 Maven 仅从远程仓库中提取
- c++ - 在 Mac 上获取代码编译器错误,但在 Windows 上学习如何编码
- javascript - 有什么方法可以让我将角色赋予我正在做的日志系统?
- java - 用于活动连接的 Apache HttpClient Keep-Alive 策略