Question

我有一个Nuxt项目。生成静态页面时一切正常。但是，我需要向其他服务器发送POST请求。

我试图同时在nuxt.config.js中使用代理，并且只使用直接查询，但是最终部署到ngnix之后，没有任何效果。

请帮助。

更新。重现步骤。

创建包括axios和代理的Nuxt应用
为其他Web服务配置代理：

proxy: { '/api': { target: 'http://example.com:9000', pathRewrite: { '^/api': '/', }, }, changeOrigin: true, },

在代码中的某处调用此服务：

const result = await this.$axios.post('/api/email/subscribe', {email: email})
运行“ yarn dev”并测试服务。它在本地可以正常工作。
运行“ nuxt generate”并部署静态代码托管服务，例如hosting.com
运行您的页面，调用上述服务。

结果，它没有调用hosting.com/api/email/subscribe，而是调用localhost:3000/api/email/subscribe。

Answer 1

请确保在项目@nuxt/axios和@nuxtjs/proxy中安装axios和代理的nuxt版本

在那之后，在您的nuxt.config.js中添加axios作为模块，并为axios和代理添加以下选项：

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    //more modules if you need
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    proxy: true,
    // See https://github.com/nuxt-community/axios-module#options
  },

  proxy: {
    '/api/': {
      target: process.env.AXIOS_SERVER, // I use .env files for the variables
      pathRewrite: { '^/api/': '' }, //this should be your bug
    },
  },

现在您可以在代码的任何部分使用axios

const result = await this.$axios.post('/api/email/subscribe', {email: email})

它将在内部解析为AXIOS_SERVER/email/subscribe，而不会引起问题。

额外：使用多个.env文件在本地测试环境

您可以将.env配置为dev，将.env.prod配置为生产，然后在本地使用yarn build && yarn start在生产环境中测试应用。您只需要在nuxt.config.js文件的顶部添加该内容

const fs = require('fs')
const path = require('path')

if (process.env.NODE_ENV === 'production' && fs.existsSync('.env.prod')) {
  require('dotenv').config({ path: path.join(__dirname, `.env.prod`) })
} else {
  require('dotenv').config()
}

Answer 2

通过ECMAScript specification，nuxt generate的作用是：构建应用程序，并将每条路由生成为HTML文件（用于静态托管）。

因此，这里毫无疑问使用definition on the Nuxt docs page。请注意，您的路径甚至都不会被重写。

可能您要查找的结果不是hosting.com/api/email/subscribe（例如/api），而是hosting.com/email/subscribe。

尽管如此，如果您使用nginx，那么我不认为您应该使用Nuxt的proxy选项。 Nginx正是为此目的而构建的，因此将您的API调用指向该位置，然后在nginx配置文件中声明它应指向的位置。

Nuxt静态生成的页面和axios帖子

2 个答案: