如何正确代理对 prod 中 /api/resource 的请求？答案

【问题标题】：how can I properly proxy requests to /api/ressource in prod?如何正确代理对 prod 中 /api/resource 的请求？
【发布时间】：2018-07-31 19:55:05
【问题描述】：

我有一个 webpack 开发配置，我的前端开发服务器运行在 8080 上，我的后端服务器运行在端口 3000 上。

所以在开发模式下，我的 webpack 开发服务器配置如下：

proxy: {
  '/api': 'http://localhost:3000',
}

如何在为我的前端构建的静态文件提供服务的 prod 服务器中做同样的事情？

我的 prod 服务器有以下代码，为我的前端的静态文件提供服务：

const proxy = require('http-proxy-middleware')

    app.use(express.static(dir))

    /**
     * Redirect everything that starts with /api/* to the backend rest server
     */

    app.use('/api', proxy({ target: backendUrl }))

    app.get('*', (req, res) => {
      res.sendFile(path.resolve(dir + '/index.html'))
    })

这不起作用，因为代理似乎丢失了 cookie（与使用 webpack 的代理不同，evyrhthing 工作）。

我是否以正确的方式解决这个问题？

【问题讨论】：

哪些 cookie 丢失了，后端的还是 prod 的？我尝试代理到 google.com，但我找回了 google 的 cookie。
前端 cookie 丢失。我想因为我得到未经授权的回复......

标签： javascript node.js express webpack

【解决方案1】：

在这种情况下，您可以创建一个reverse-proxy，它将接收来自前端的所有信息，向另一个地址发出请求，然后将正确的答案返回给前端。我过去曾经开发过很多这样的东西，我创建了一个 package 可以帮助你。

基本上流程是：

Frontend -> endpoint on your render server (port 8080) -> backend (port 3000) -> render server (port 8080) -> frontend

【讨论】：

【解决方案2】：

您可以尝试使用：

作为反向代理的服务器（即 nginx）。
一个 node-http-proxy 作为反向代理。
如果每个域都由同一个 Express 提供服务，则为 vhost 中间件代码库和 node.js 实例。

您可能还想检查您的 cookie 标志（changeOrigin、secure、cookieDomainRewrite 等）

信息：如果在 localhost 上运行 http，如果响应中存在安全标志，则不会设置 cookie

【讨论】：