Nuxt static generated page and axios post

Question

I have a Nuxt project. Everything is OK when I generate a static page. However, I need to send a POST request to the other server.

I tried to use both a proxy in nuxt.config.js and just direct query, but after deploy to the ngnix eventually, nothing works.

Please help.

---

UPDATE. Steps to reproduce.

• Create Nuxt App including axios and proxy
• Configure your proxy for other webservice:

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

• call this service somewhere in the code:

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

• run "yarn dev" and test the service. It works locally properly.

• run 'nuxt generate' and deploy the static code hosting service, for example, hosting.com
• run your page which calls the above-mentioned service.

As a result, instead of making POST call to the hosting.com/api/email/subscribe, it calls localhost:3000/api/email/subscribe.

Answer 1

By definition on the Nuxt docs page what nuxt generate does is: Build the application and generate every route as a HTML file (used for static hosting).

Therefore, using proxy is out of question here. Take note that you path is not even being rewritten.

And probably the result you're looking for is not hosting.com/api/email/subscribe (wit /api), but hosting.com/email/subscribe.

Nevertheless, if you use nginx then I don't think you should use Nuxt's proxy option. Nginx is built just for that so point your API calls there and in nginx config file just declare where it should point further.

Answer 2

Be sure to install the nuxt versions of axios and proxy in your project @nuxt/axios and @nuxtjs/proxy

after that in your nuxt.config.js add axios as module plus this options for axios and proxy:

  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
    },
  },

now you can use axios in any part of the code like this

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

it will internally resolve to AXIOS_SERVER/email/subscribe without cause cors issues.

EXTRA: test enviroments in local using multiples .env files

you can configure .env for dev and .env.prod for production, after that in local you can use yarn build && yarn start for test your app with your production enviroment. You only need add this at the top of your nuxt.config.js file

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()
}