nuxt-community / proxy-module

The one-liner node.js http-proxy middleware solution for Nuxt 2 using http-proxy-middleware
MIT License
413 stars 26 forks source link

Proxy option "target" doesn't redirect to external URLs #3

Closed gorango closed 5 years ago

gorango commented 6 years ago

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
This question is available on Nuxt.js community (#c4)
appinteractive commented 6 years ago

hey anyone doese something about that? @gorango did you have any workaround?

1337huania commented 6 years ago

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/': ''}
  }
}
abumalick commented 6 years ago

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.

ricardogobbosouza commented 5 years ago

@gorango you configuration is wrong... See https://axios.nuxtjs.org/options#proxy

@abumalick in the module options you only change the default values.

If you do not set the proxy property the module will not start https://github.com/nuxt-community/proxy-module/blob/master/lib/module.js#L10

ricardogobbosouza commented 5 years ago

@gorango I think we can close this

ricardogobbosouza commented 5 years ago

@manniL, @pi0 can close this?

dhrubo55 commented 5 years ago

hey, I am currently working a nuxtjs project where i have to fetch some data from an api. i am getting cors issue. I tried adding @nuxt/proxy and configure proxy by using array like : *proxy: ['https://dev[id].service-now.com/api/now/v1//'] and sometimes ago i did it and it worked somehow and i didnt understood it how it worked. and now working on new project it doesnt work. can someone help me.

The api i am trying to access is : https://dev[id].service-now.com/api/now/table/incident

yogisaka commented 4 years ago

Hi i have some problem with nuxt.config.js

  proxy: {
    '/api/': {
      target: process.env.API_URL,
      pathRewrite: {
        '^/api': ''
      }
    }
  },

and error

 ERROR  [HPM] Missing "target" option. Example: {target: "http://www.example.org"}                                         12:12:03

  at Object.createConfig (node_modules/http-proxy-middleware/lib/config-factory.js:43:11)
  at new HttpProxyMiddleware (node_modules/http-proxy-middleware/lib/index.js:17:30)
  at module.exports (node_modules/http-proxy-middleware/index.js:4:10)
  at proxy.forEach (node_modules/@nuxtjs/proxy/lib/module.js:63:30)
  at Array.forEach (<anonymous>)
  at ModuleContainer.proxyModule (node_modules/@nuxtjs/proxy/lib/module.js:61:9)
  at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:190:34)
  at ModuleContainer.requireModule (node_modules/@nuxt/core/dist/core.js:133:17)
  at ModuleContainer.axiosModule (node_modules/@nuxtjs/axios/lib/module.js:106:10)
  at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:190:34)

but if im replace process.env.API_URL with direct url its work, how to use process.env. ?

abumalick commented 4 years ago

process.env reads the environment variables.

You can use this to add some env variables for your project easily: https://www.npmjs.com/package/dotenv

I believe that adding an file ".env" with your api url and adding "require('dotenv').config()" on the top of your nuxt config should do the trick

On Wed, Feb 26, 2020, 7:12 AM yogi saka notifications@github.com wrote:

Hi i have some problem with nuxt.config.js

proxy: { '/api/': { target: process.env.API_URL, pathRewrite: { '^/api': '' } } },

and error

ERROR [HPM] Missing "target" option. Example: {target: "http://www.example.org"} 12:12:03

at Object.createConfig (node_modules/http-proxy-middleware/lib/config-factory.js:43:11) at new HttpProxyMiddleware (node_modules/http-proxy-middleware/lib/index.js:17:30) at module.exports (node_modules/http-proxy-middleware/index.js:4:10) at proxy.forEach (node_modules/@nuxtjs/proxy/lib/module.js:63:30) at Array.forEach () at ModuleContainer.proxyModule (node_modules/@nuxtjs/proxy/lib/module.js:61:9) at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:190:34) at ModuleContainer.requireModule (node_modules/@nuxt/core/dist/core.js:133:17) at ModuleContainer.axiosModule (node_modules/@nuxtjs/axios/lib/module.js:106:10) at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:190:34)

but if im replace process.env.API_URL with direct url its work, how to use process.env. ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nuxt-community/proxy-module/issues/3?email_source=notifications&email_token=AB75GYIUYLNVRAJRHVABWJLREYB3ZA5CNFSM4EUWCB52YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEM66GXY#issuecomment-591258463, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB75GYNMWVQ6CGJ4ZIKCPK3REYB3ZANCNFSM4EUWCB5Q .

yogisaka commented 4 years ago

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',
  ],
bapex commented 4 years ago

Hi, I have a problem about proxy in nuxt.config.js for CORS.

This code can work.

proxy: {
   '/api/': { target: process.env.PRIMARY_API, pathRewrite: { '^/api/': '/' } }
}

But I want to use multiple proxy. For example,

proxy: {
  '/api/': { target: process.env.PRIMARY_API, pathRewrite: { '^/api/': '/' } },
  '/api2/': { target: process.env.SECONDARY_API, pathRewrite: { '^/api2/': '/' } }
}

But It can't work. How can I use multiple proxy?

thunderwin commented 4 years ago

I wanna know as well

devlim commented 3 years ago

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
codeperl commented 2 years ago

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!

NansPellicari commented 1 year ago

Hi @codeperl ! Did you find any solution yet ? I'm dealing with the exact same problem