Activities

jordanleven

jordanleven posted a new question

proxy-module •

Using Proxy Module with Docker

Are there special considerations I need to take when using this module with Docker? Although I'm able to get the proxy working locally without Docker, I'm having an issue using the proxy module locally with Docker. Specifically, the route returns a 404 instead of the target.

My Nuxt config, right now, is using the example configuration from the docs.

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
    '@nuxtjs/proxy',
  ],
  axios: {
    proxy: true,
  },
  proxy: {
    '/api': {
      target: 'http://example.com',
      pathRewrite: {
        '^/api' : '/'
        }
      }
  },

When hitting localhost after running nuxt, I can visit localhost/api and have it proxy to example.com. However, when building the app and using Docker, visiting localhost/api results in the 404. Notably, hitting localhost in both instances gives me the expected app apex.

mpgalaxy

mpgalaxy posted a new feature request

proxy-module •

idea Use proxy module with company proxy

What problem does this feature solve?

Currently the proxy module can't make use of a company proxy server, resulting in timeout with external identity provider(e.g. keycloak), which is being proxied through /auth. Although the docker container is configured properly for using the company proxy, nuxt.js and especially the nuxt proxy module don't utilize these settings.

What does the proposed changes look like?

Add a boolean flag as well as configuration option for nuxt.config to utilize the company proxy server, e.g.:

proxy: {
    '/auth': {
      target:
        (process.env.KEYCLOAK_SCHEME || 'http') +
        '://' +
        (process.env.KEYCLOAK_HOST || 'localhost') +
        ':' +
        (process.env.KEYCLOAK_PORT || '8080'),
      useCompanyProxy: true,
      companyProxy: process.env.COMPANY_HTTP_PROXY // example: http://companyproxy:8888
    },
...
Jamiewarb

Jamiewarb posted a new question

proxy-module •

Debug mode

I'm using the proxy module, but am getting a 404.

I can see the URL the browser is posting too, but I can't then see what URL it is being forwarded on to.

Is there any such debug mode or logging available to log what URL the request is being forwarded to, and to check the proxy is even receiving the request properly?

I had a look at https://github.com/chimurai/http-proxy-middleware, and tried to add logLevel: 'debug' to the options, like the below:

proxy: {
  '/api/': {
    target: `https://domain.com`,
    logLevel: 'debug',
  },
},

I also tried as a global option:

modules: [
  ['@nuxtjs/proxy', { logLevel: 'debug' }],
],

But I can't seem to get any logs. Would you be able to let me know how I can do this correctly please?

MikeKonan

MikeKonan posted a new bug report

proxy-module •

bug SSE events are not being forwarded in production mode

Version

1.3.3

Reproduction link

https://github.com/MikeKonan/nuxtproxysse_bug

Steps to reproduce

  1. Start express server - "node ./server/index.js"
  2. Start web app - "npm run dev" or "npm run build && npm run start"

What is expected ?

events are being shown in chrome debugger

What is actually happening?

events are NOT being shown in chrome debugger

Additional comments?

It's working as expected in develop mode - HTTP request reaches 200 and events are being shown in chrome debugger. But not working on a production mode when HTTP request succeeds with 200 but no events are being shown.

1isten

1isten posted a new question

proxy-module •

Doesn't work with Express?

I created a project with npx create-nuxt-app my-nuxt-app. In the "Choose custom server framework" section I chose Express.

For APIs I have a separated Laravel project running on http://127.0.0.1:8000/api/xxx.

Below is my nuxt.config.js config:

{
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    proxy: true,
  },

  proxy: {
    '/api/': 'http://127.0.0.1:8000',
  },
}

Now I start the nuxt app with npm run dev on http://localhost:3000, the proxy does not work… axios still sends api requests to localhost:3000. May I know if I missed some steps or the proxy module only works with nuxt default server?

Kerita

Kerita posted a new question

proxy-module •

How to get the client ip ?

My app is using proxy module. When the browser sends a request to the server, how can the server know the browser ip?

SHxKM

SHxKM posted a new question

proxy-module •

How does this module prevent CORS?

I'm asking this after writing this question on the django-cors-headers repo. I was wondering why I didn't have to deal with CORS/preflighted requests with Nuxt's axios module, and then I read this in Nuxt's documentation:

proxy

Default: false

You can easily integrate Axios with Proxy Module and is much recommended to prevent CORS and deployment problems.

Why and how does the proxy module "prevent" CORS related problems? I have proxy enabled and probably that's the reason why I'm not getting CORS errors.

carlmjohnson

carlmjohnson posted a new feature request

proxy-module •

idea Add ability to use context matching function

What problem does this feature solve?

The following example is in the README for http-proxy-middleware, but AFAICT, cannot be implemented in proxy-module:

var filter = function(pathname, req) {
  return pathname.match('^/api') && req.method === 'GET';
};

var apiProxy = proxy(filter, { target: 'http://www.example.org' });

I would like the ability to use context matching functions.

What does the proposed changes look like?

On a user level it might look like:

  proxy: {
    [(pathname, req) => pathname.match('^/api') && req.method === 'GET']: { target: 'http://www.example.org' }
  },
sowinski

sowinski posted a new question

proxy-module •

Dynamic proxy target url

Hi,
I use the proxy feature and it is working well.
proxy: {
'/rest': process.env.PROXY_URL || 'https://www.example.com',
},

But I have 47 domains and I would like to change them with a middleware or plugin the proxy URL dynamically on each request.

Is this possible?

Example: If someone is entering the website from
www.example.com => then the proxy should be going to www.example.com
www.example.it => then the proxy should be going to www.example.it

Dok11

Dok11 posted a new question

proxy-module •

How use proxy? Please, provide example

I write:

export default {
  modules: [
    ['@nuxtjs/proxy', {
      proxy: {
        '/f': 'http://my-domain/'
      }
    }]
  ]
}

and it is not works. Is I do right? Maybe proxy must be place in another part of config?

zajca

zajca resolved the question #c27

proxy-module •

Proxy behind proxy

find out that on ssr request was called to http://proxy:port/http://localhost:10000 where is app which throws 502 since localhost can't be used with this proxy and it's whitelisted. Interesting is that this happened only in SSR. And my host for app is not localhost but 127.0.0.1.
I have to add to .env http_proxy="" to force ignore proxy.
It looks to me that on ssr no_proxy env var is no readed or something. :/

zajca

zajca posted a new question

proxy-module •

Proxy behind proxy

I now it sounds weird, but on my production server app si behind corporate proxy. Api is on same server and it's accessible on localhost:8080 so it doesnt have to use corporate proxy.

No the weird thing.

When I navigate in browser to page with asyncData request is going to nuxt proxy and it's success. But when I refresh page and asyncData are called in SSR proxy will return 502. Which is like super weird I don't get why is there a difference.

renestalder

renestalder posted a new question

proxy-module •

How to handle proxy with Nuxt serverMiddleware in between

I use a serverMiddleware to set the request body for proper server-side POST form handling. I found out via http-proxy-middleware repo that things like body-parsers will break the proxy if they run before it and the solution is to run the middleware after the proxy call.

Now, I'm not really sure how I would be able to change this in Nuxt.

That's my serverMiddleware:

import {IncomingMessage, ServerResponse} from 'http';
import {parse} from 'querystring';

export default function(req: IncomingMessage, res: ServerResponse, next: () => void) {
  let body = '';

  req.on('data', data => {
    body += data;
  });

  req.on('end', () => {
    (req as any).body = parse(body) || {};
    next();
  });
}

Removing this from my nuxt.config makes the proxy working. Otherwise the proxy answers with timeout errors or other stuff.

So I would require to run my serverMiddleware after the proxy.

Is that somehow possible?

ps. one cannot create a bug report on cmty for that module as the version list is empty but a required field.

warheartvik

warheartvik posted a new question

proxy-module •

https as target

I'm using proxy module https://axios.nuxtjs.org/options#proxy. So, If I set target with https like

proxy: {
'/api/': { target: 'https://api.example.com/', pathRewrite: {'^/api/': ''} }
}

Should work just fine? Because I did that on my app. And the request failed with error 500

Does that means that target can't be set as https? The target work as http, but I set it as https fails

unknown.png

amrigo

amrigo posted a new question

proxy-module •

How to consume data from two diferent Api´s?

I am using NuxtJs, and need to consume Json data from two diferent Api´s.

The first Api is working, and the second Api is not working.

I follow the instructions from this link :

At nuxtjs.config i have these lines below and both url´s are retrieving data as expected:

proxy: {
    '/api': {
      target: 'http://localhost/api/stores',
      pathRewrite: {
        '^/api' : '/'
        }
      },
      '/apiCategories': {
        target: 'http://localhost/api/get_categories',
        pathRewrite: {
          '^/apiCategories' : '/apiCategories'
          }
        }
  }

At pages/index.vue at the created hook i set :

 created() {    
        Axios.get('/api')
          .then(response => {
            this.stores = response.data
          })
          .catch(error => {
            console.log('There was an error:', error.response)
          }),

          Axios.get('/apiCategories')
          .then(response => {
            this.options = response.data,
          })
          .catch(error => {
            console.log(' There was an error at apiCategories: ', error.response) 
          })
    },

The /api is working right, while the /apicategories gives me the error message :

commons.app.js:199 GET http://localhost:3000/apiCategories 404 (Not Found)

Runnnig the url http://localhost:3000/apiCategories at the browser gives me the expected Json data.

Wich is the right way to consume from two diferent Api´s using NuxtJs or proxy module ?

warheartvik

warheartvik posted a new question

proxy-module •

Error in created hook (Promise/async): "Error: connect ECONNREFUSED 127.0.0.1:80

Hello,

After installing que configuring @nuxtjs/proxy as is shown in https://nuxtjs.org/faq/http-proxy/, I'm getting this warn on server side console when I refresh the page:

Error in created hook (Promise/async): "Error: connect ECONNREFUSED 127.0.0.1:80

I'm using axios.

Any advise? Something I could look up?

Best regards

maverickpravin

maverickpravin posted a new question

proxy-module •

How to path rewrite for nuxt application

I am creating a new custom e-commerce application. Currently my product catlog url :
https://example.com/cat-title/cat-id

How can I rewrite to the following?
https://example.com/cat-title/

shangxinbo

shangxinbo posted a new question

proxy-module •

MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 upgrade listeners added. Use emitter.setMaxListeners() to increase limit

When I configure the proxy to exceed 10, node will throw an error. Like this:

MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 upgrade listeners added. Use emitter.setMaxListeners() to increase limit

This will make my memory leak

yaki4

yaki4 posted a new question

proxy-module •

Use store value as header

Hi i would like to use a store value with onProxyReq.
But it seems that nuxt context or store is unavailable in proxy. Any ideas how to do it ?
I've tried req.body but it's undefined.
proxy: {
'/graphql': {
target: 'https://beautifulapigraph.com',
onProxyReq: function (proxyReq, req, res, options) {
proxyReq.setHeader('X-VAL', storeBasedValue)
}
}
}

yaki4

yaki4 posted a new question

proxy-module •

Use store value as header

Hi i would like to use a store value with onProxyReq.
But it seems that nuxt context or store is unavailable in proxy. Any ideas how to do it ?
I've tried req.body but it's undefined.
proxy: {
'/graphql': {
target: 'https://beautifulapigraph.com',
onProxyReq: function (proxyReq, req, res, options) {
proxyReq.setHeader('X-VAL', storeBasedValue)
}
}
},