如何在特定路径上代理到后端服务器？

Question

以下是路由配置：

<Route path='/' component={CoreLayout}>
  <IndexRoute component={HomeView}/>
  <Route path='/404' component={NotFoundView}/>
  <Redirect from='*' to='/404'/>
</Route>

这是webpack-dev-server的代理配置：

proxy: {
  '/service': 'http://localhost:8080'
}

Express服务器监听3000端口。

我希望所有发送到http://localhost:3000/service的请求都会被转发到http://localhost:8080，但似乎React Router处理了所有请求，代理无法正常工作。

有人知道如何解决吗？ 预先致谢。

- eyakcn

---

你找到解决方案了吗？ - dedan

我也遇到了这个问题，有人有解决方案吗？ - raquelhortab

Answer 1

1. 请查看 Webpack Dev Server 文档，您需要提供一个带有 target 属性的对象。

2. http-proxy-middleware 文档展示了使用 patterns 进行匹配的用法。

总之，我建议尝试以下内容：

proxy: {
  '/service/**': { target: 'http://localhost:8080' }
}

- Andrey

Answer 2

确保你正确处理 API 调用的 Promise。我曾经遇到过同样的问题，即客户端服务器处理了所有的 API 调用，而没有返回 404 错误并代理接管。

fetch("/api/list")
    .then(res => res.json())
    .then(data => {
      // handle the data
      })

- Sparsh