Next.js: Webpack’s devServer proxy

[BurntCaramel]

I have a local API running at localhost:7000. To avoid CORS issues, I would like to proxy all /api requests to this server. I’ve tried every possible combination of try to set up the proxy in the setting of devServer Webpack config:

// next.config.js
module.exports = {
    webpack(config, { dev }) {
        config.devServer = config.devServer || {}
        config.devServer.proxy = {
            '/api': {
                target: 'http://localhost:7000',
                changeOrigin: true,
                secure: false,
                onProxyReq(request, req, res) {
                    request.setHeader('origin', 'http://localhost:7000')
                }
                //pathRewrite: { '^/api': '/api' }
            }
        }

        //config.devServer.proxy = 'http://localhost:7000/api'

        return config
    }
}

I’ve tried /api, /api*, using a simple URL as the value, using a more complex object like above with every combination of key-value pairs, and so on. Since Webpack 2 is being used, I’m following the latest documentation.

I would love to find a solution and add it to Next’s documentation.

[thangngoc89]

@BurntCaramel the above code doesn't work simply because next.js doesn't use Webpack dev server. Use can use the custom express server solution with the http-proxy-middleware directly

[BurntCaramel]

I imagine this is a fairly popular need, so can:

1. This be documented? "To proxy requests to an API in development, set Next.js up with Express and use the http-proxy-middleware. Next.js does not use the Webpack dev server."
2. Can this be added to the Express example.

Happy to do so myself, hopefully have some time this week.

[cheshirecode]

Ran into the same out of the box limitation while setting up reverse proxy for development. On Prod we have LB and web server taking care of that, just too much trouble for each dev to set it up. Going to figure this out and link back later.

[jeremybradbury]

@cheshirecode we have this same issue. See this ridiculous response my coworker got: https://github.com/zeit/next.js/issues/2633#issuecomment-317445012 "don't use https locally"

uhh what!?!

To make matters worse, locally I personally have Httpd running on 8080 with self signed SSL support on another non-admin port, with dnsmasq setup to auto map /Sites/site to http://site.dev and https://site.dev and proxy all .dev traffic to the proper ports. So for me, even setting up Nginx locally requires breaking a bunch of local projects and a sweet dev setup.

Nobody should need to install Nginx locally to work on a NodeJS app, especially a framework whose aim is to simplify development (not with a secure remote API apparently).

We'll likely try @thangngoc89's suggestion and get back later too.

[arunoda]

@jeremybradbury I think you missed the point what we called here as dev. It's not the development version of your app.

Here what we call dev is, when you developing your app locally. It's not suited for serving content other than just for developing your app locally.
We mean not suited for a reason. It's not optimized at all and bulky.

It used webpack HMR and it might (or might not) work with HTTPs. We haven't tried that.
We've also exposed webpack dev middleware configurations as well. (See webpack config docs)

---

Integrating SSL support won't be a part of Next.js. If you want to do that, since we've the custom server config you can try that too (or use nGinx or any related setup)

For the further SSL issue, use this issue: https://github.com/zeit/next.js/issues/2633

---

If you want to expose a dev version of your to someone, even for that build the app and run it with production mode.

[cheshirecode]

@arunoda you have a point there that reverse proxy should be figured out outside Next. I believe it's just a matter of time until someone figures out an example setup that allows custom server with http-proxy-middleware . Found a gist to start with https://gist.github.com/jamsesso/67fd937b74989dc52e33.

[jeremybradbury]

@cheshirecode this approach looks like a great solution, create a proxy on the frontend app.

@arunoda I didn't miss anything, I did mean locally. I think you missed the point AND the bigger picture: we must run https locally to connect to a remote https API.

AND even using Nginx reverse proxying over local unencrypted TCP ports will break end to end encryption (data can become unencrypted before getting encrypted again).

Security and end-to-end encryption is of the utmost importance when building apps that require regulatory compliance.

[cheshirecode]

Got reverse proxy working by connecting express to http-proxy-middleware in custom server. Let me know if anyone needs an example. I can submit a PR for with-custom-reverse-proxy during spare time.

[Kielan]

@cheshirecode yes plz do send, I nearly have one working as well but currently in a country with spotty Internet and funny looking charge sockets

[cheshirecode]

Had some time to extract out a clean sample. Here you go https://github.com/zeit/next.js/pull/2660.

[hmontes]

Do you have a tutorial for that? This is really useful.

[baruchvlz]

@hmontes I don't think there's a tutorial, but the example is pretty straight forward: https://github.com/zeit/next.js/blob/master/examples/with-custom-reverse-proxy/