Question

使用Nuxt开发通用JS应用程序，我试图配置webpack's dev proxy，以便仅在开发阶段，对/api的请求被代理到http://127.0.0.1:500/api，他们将使用Python REST API。遵循Nuxt文档之后，我在nuxt.config.js中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时，返回了我的Nuxt应用程序（它在dev中的端口8080上运行），表明webpack开发代理未捕获/api路径并执行了代理。只是为了确认代理服务器目的地是否正常工作，如果我访问http://127.0.0.1:5000/api/things，就会得到预期的API响应。 为什么，当我扩展Nuxt webpack配置以启用webpack开发代理时，该代理不起作用吗？

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

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

如果可以使@pack只能在开发中使用，我很乐意使用@ nuxt / proxy模块而不是（在顶部）webpack开发代理。

Answer 1

我需要这样做并且能够在 nuxt.config.js 中使用以下内容来解决这个问题

export default {
  // other config ...

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

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

引用用于插入条件对象字段的语法（这是我以前不知道的）： https://stackoverflow.com/a/51200448

Answer 2

呃，我在树错树上。

Nuxt 甚至在生产中都需要进行代理。当我的初始请求得到处理并且应用在服务器端呈现时，所有API请求都需要被代理，因为Node服务器正在执行调用，而不是浏览器，因此这些API请求甚至都不会像nginx那样打到我的生产路由器上或HAProxy（通常将/和/api路由到适当的服务）。

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

2 个答案: