proxy-module: Proxy option "target" doesn't redirect to external URLs

The request that is generated when attempting to proxy to an external API redirects to localhost.

Reproduce with the following:

nuxt.config:

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: {
      '/geo': {target: 'http://freegeoip.net/json', pathRewrite: {'^/geo': ''}}
    }
  }

component.vue:

export default {
  async created () {
    const location = await this.$axios.$get('/geo')
    console.log(location)
  }
}

Throws a 404 with the following request headers in the call:

Request URL: http://localhost:3000/json/
Request Method: GET
Status Code: 404 Not Found
<div align="right">This question is available on Nuxt.js community (#c4)</div>

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 30
  • Comments: 15 (3 by maintainers)

Most upvoted comments

It works well. @appinteractive @gorango

component.vue

async asyncData ({ $axios }) {
  let { data } = await $axios.get('/api/')
  return {
    prices: data.data
  }
}

nuxt.config.js

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/proxy'
],
axios: {
  proxy: true
},
proxy: {
  '/api/': {
    target: 'http://api.travelpayouts.com/v2/prices/latest',
    pathRewrite: {'^/api/': ''}
  }
}

It’s also not working for me

my spa url is localhost:9430, while proxy url is localhost:9431

export default {
modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/proxy',
  ],

  axios: {
    proxy: true,
    credentials: true,
  },
  proxy: {
    '/backend': {
      target: 'http://localhost:9431',
      pathRewrite: { '^/backend': '' },
    },
  },
}
const loginCredentials = {
  email: this.email,
  password: this.password,
}
await this.$axios.get('/backend/sanctum/csrf-cookie').then(() => {
  this.$axios
    .post('/backend/login', loginCredentials)
    .then((response) => {
      console.log(response)
    })
})

i getting following response from browser

Error occured while trying to proxy to: 0.0.0.0:9430/sanctum/csrf-cookie

Thank you very much @llavre .

It was not clear for me while reading the documentation that proxy is a property of exported object in nuxt.config.js . I was trying to include it in the module options …

Thank you very much for clarification.

It’s also not working for me

my spa url is localhost:9430, while proxy url is localhost:9431

export default {
modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/proxy',
  ],

  axios: {
    proxy: true,
    credentials: true,
  },
  proxy: {
    '/backend': {
      target: 'http://localhost:9431',
      pathRewrite: { '^/backend': '' },
    },
  },
}
const loginCredentials = {
  email: this.email,
  password: this.password,
}
await this.$axios.get('/backend/sanctum/csrf-cookie').then(() => {
  this.$axios
    .post('/backend/login', loginCredentials)
    .then((response) => {
      console.log(response)
    })
})

i getting following response from browser

Error occured while trying to proxy to: 0.0.0.0:9430/sanctum/csrf-cookie

@devlim Hi, did you find any solution? I am stuck in it for last 10 days! I’ll be glad if you can share your thoughts. I am using nuxt 2.15, ssr and stuck for social login issue. I am using local scheme for authentication with @nuxtjs/auth-next. I am facing the exact issue! proxy config is not replacing the ‘/apiv1’ with target!

Thanks in advance!

Thank you very much @abumalick, im just need add require('dotenv').config() on the nuxt.config.js its work, i tink im just need add '@nuxtjs/dotenv' on module but need declare on top too. thanks.

modules: [
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],