如何在 Nuxt 中使用 webpack 开发代理

Question

像这样在 nuxt.config.js 中使用 Nuxt to develop a universal JS app, I'm attempting to configure webpack's dev proxy so that, in development only, requests to /api get proxied to http://127.0.0.1:500/api where they'll reach a Python REST API. Following the Nuxt docs, I've extended the webpack config：

build: {
  extend (config, { isDev }) {
    // Proxy /api to Python only in dev
    if (isDev) {
      const devServer = {
        proxy: {
          '/api': 'http://127.0.0.1:5000'
        }
      }
      config.devServer = devServer;
    }
  }
}

如果我记录配置，我会看到正在应用的更改：

...
devServer: { proxy: { '/api': 'http://127.0.0.1:5000' } } }
...

然而，当我访问 http://127.0.0.1:8080/api/things, my Nuxt app is returned (it runs on port 8080 in dev), indicating that the webpack dev proxy is not catching the /api path and performing the proxying. Just to confirm that the proxy destination is working, if I visit http://127.0.0.1:5000/api/things 时，我得到了预期的 API 响应。 为什么当我扩展了 Nuxt webpack 配置以启用 webpack dev 代理时，代理不起作用？

不过，我在 @nuxt/proxy 模块上取得了成功，但关键是，我找不到一种方法让它只影响开发而不影响生产。 nuxt.config.js 的那部分看起来像这样：

axios: {
  proxy: true
},
proxy: {
  '/api': 'http://127.0.0.1:5000'
},

我很乐意使用 @nuxt/proxy 模块而不是（在？）webpack 开发代理，如果它只能在开发中工作的话。

Answer 1

呃，我找错人了。

Nuxt 需要代理，即使在生产中也是如此。当我的初始请求被处理并且应用程序在服务器端呈现时，任何 API 请求都需要被代理，因为 Node 服务器正在执行调用，而不是浏览器，所以那些 API 请求不会'我什至没有访问我的生产路由器，如 nginx 或 HAProxy（通常会为 / 和 /api 路由到适当的服务）。

Answer 2

我需要这样做，并且能够使用 nuxt.config.js

中的以下内容解决此问题

export default {
  // other config ...

  ...process.env.NODE_ENV === 'development' && {
    proxy: {
      '/api': 'http://localhost:8000',
    }
  },
}

如果我们正在进行开发构建，此代码只会在 nuxt 配置中添加代理密钥。

参考用于插入条件对象字段的语法（这是我以前不知道的）：

如何在 Nuxt 中使用 webpack 开发代理

How to use webpack dev proxy with Nuxt

webpack

nuxt.js

nuxt-edge