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.

Please elaborate on "nothing works". What is your code attempting to do? Do you see any error messages in your browser console? — Phil

chefjuanpi chefjuanpi · Accepted Answer · 2020-04-17T01:46:15

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

Nuxt static generated page and axios post

2 Answers