Nuxt.js: How to set up proxy with nuxt.config.js

[daimingchun]

 dev: {
    env: require('./dev.env'),
    port: 8888,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/local': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/local': ''
        }
      }
    }

thanks

_{This question is available on Nuxt.js community (#c651)}

[piyushchauhan2011]

I tried to define proxy under 'build/extend' section in nuxt.config.js like this:

build: {
    extend (config, ctx) {
      const proxy = {
        proxy: {
          '/api': 'http://127.0.0.1:5000'
        }
      }
      config.devServer = Object.create({}, config.devServer, proxy)
    },
  },

But, I still get no-access @chunge0328 @alexchopin

[piyushchauhan2011]

I created a demo on glitch here https://slash-crocodile.glitch.me/about which requests jsonplaceholder api for posts. Code is here: https://glitch.com/edit/#!/slash-crocodile?path=pages/about.vue:20:1

Feels like not able to push correctly the proxy to webpack !

[pi0]

Proxy Module Coming Soon :)

[piyushchauhan2011]

Waiting eagerly for it 😍

[piyushchauhan2011]

For now who are struggling to get it working they can use Nuxt+Express setup with http-proxy-middleware which just proxy request to desired api.
https://github.com/chimurai/http-proxy-middleware

Just a drop in for now ;)

[pi0]

@piyushchauhan2011 I'm exactly using http-proxy-middleware for that module :) proxy module just adds support to internal nuxt server without express.

[piyushchauhan2011]

Yup it would be clean and easy to setup project using that nuxt module, just a drop-in ;)

[pi0]

proxy module is available now! Currently as an internal limitation it only works with nuxt internal server, Also express support is coming soon in next Nuxt alpha releases.

[SinisaG]

So this modules are available for version 1+, that is currently in alpha? Is there a way to setup proxy for previous versions? I am struggling with the same issues as comments above.

Edit: I've solved it like that. I am not super happy with that, but it works. :)

I've created a server.js with following content:

const Nuxt = require('nuxt');
const proxy = require('http-proxy-middleware');
const app = require('express')();
const options = require ('./nuxt.config.js');

app.use('/api', proxy({ target: 'http://www.example.com', changeOrigin: true }));
// We instantiate Nuxt.js with the options
const nuxt = new Nuxt(options);
const promise = nuxt.build();
promise.then(() => {
  app.use(nuxt.render);
  app.listen(3000);
  console.log('Server is listening on http://localhost:3000');
})
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

And updated my package.json dev command to:

    "dev": "node server.js",

[c4milo]

proxy module seems useful but it would be very convenient to also allow using Webpack's internal dev server. Why forcing a new dependency when it is already using Webpack?

[c4milo]

@pi0 how can I provide a custom matching function as context to the nuxt proxy module?

[levy9527]

look at this
https://www.npmjs.com/package/@nuxtjs/proxy

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.