24

I want to proxy /v1/* to http://myserver.com, and here is my script

devServer: {
  historyApiFallBack: true,
  // progress: true,
  hot: true,
  inline: true,
  // https: true,
  port: 8081,
  contentBase: path.resolve(__dirname, 'public'),
  proxy: {
    '/v1/*': {
      target: 'http://api.in.uprintf.com',
      secure: false
      // changeOrigin: true
    },
  },
},

but it doesn't work, enter image description here

Mir-Ismaili
  • 13,974
  • 8
  • 82
  • 100
Arthur Xu
  • 441
  • 1
  • 5
  • 12

3 Answers3

39

Update: thanks to @chimurai, setting changeOrigin: true is important to make it work.

Underneath webpack-dev-server passes all the proxy configuration to http-proxy-middleware, from the documentation. It's clear the use case you want is actually achieved with /v1/** path:

devServer: {
   historyApiFallBack: true,
   // progress: true,
   hot: true,
   inline: true,
   // https: true,
   port: 8081,
   contentBase: path.resolve(__dirname, 'public'),
   proxy: {
     '/v1/**': {
       target: 'http://api.in.uprintf.com',
       secure: false,
       changeOrigin: true
     }
   }
 },
Yevgen Safronov
  • 3,977
  • 1
  • 27
  • 38
  • 9
    Should work with the proxy option: `changeOrigin: true` – chimurai Apr 19 '16 at 19:52
  • `changeOrigin: true/false, Default: false - changes the origin of the host header to the target URL` Yeah, it did work. Thanks for your answer! – Arthur Xu Apr 20 '16 at 01:46
  • I'm new to webpack, where do you put the configuration for a proxy? – AturSams Apr 23 '17 at 14:12
  • 1
    which version of webpack support this proxy feature, I am using webpack: 3.11.1 and webpack-dev-server: 2.9.6 and http-proxy-middelware: 0.19.1. This proxy configuration is not working for me, I have tried every possible combinaton of the proxy configuration. – Vijender Kumar Dec 28 '18 at 07:24
10

Make sure that your request url and port matches that which your webpack-dev-server is running on. So, if your api is located at http://localhost:5000, and your dev server is running on http://localhost:8080, make sure all of your requests are to http://localhost:8080. Its best to make your requests to localhost:8080/api (to avoid conflict with app routes) and use the path rewrite to remove the /api.

Example:

Webpack devserver proxy config:

proxy: {
    '/api': {
        target: 'http://localhost:5000',
        pathRewrite: { '^/api': '' },
    },
}

Webpack dev server running on:

http://localhost:8080

Desired API endpoint:

http://localhost:5000/items

In your app, make the request to:

http://localhost:8080/api/items.

This should work. It seems to me that all of the above issues stem from making the request to the API url and port rather than the webpack dev server url and port and using the proxy and path rewrite to direct the request to the API.

Jeff Weinberg
  • 414
  • 4
  • 9
1

This works fine for me.

    devServer: {
        host: '11.11.111.111',          //local ip
        port: 8080,
        contentBase: outputpath,
        historyApiFallback: true,
        inline: true,
        proxy: {
          '/api':{
                target:'http://example.com',
                pathRewrite: {'^/api' : ''},
                secure:false,
                changeOrigin:true
          }
        }
    },

//use

    $.ajax({
        url:'/api/pvp/share/getsharecfg.php',
        dataType:'json',
        ...
He LI
  • 11
  • 1