CODEWITHSUNDEEP
webwebpackwebpack-dev-server
Ilya
Ilya

Reputation: 93

How to work with multiple targets in webpack proxy?

I have React web app. It had got data from one server (domain). Part of webpack config:

proxy: {
    '/api/**': {
        target: 'https://olddomain.com'
    }
}

Now I have second server. I need to work with both domains something like this:

proxy: {
    '/api/**': {
        target: 'https://olddomain.com'
    },
    '/api/v1/newClass/newMethod': {
        target: 'https://newdomain.com'
    }
}

Please, help me. How to work with multiple targets in webpack proxy?

Upvotes: 1

Views: 1370

Answers (1)

Pankaj Upadhyay
Pankaj Upadhyay

Reputation: 427

I was searching the same thing and came across your question, and as now I have solved my issue maybe you can try the same. I have redirected all API request to same URL with different path base on the request and then poxy those path to redirect to correct url-

proxy: {
'/api/**': {
    target: '<Your App url>'
    pathRewrite: {
      '/api/v1/newClass/newMethod': 'newClient',
      '/api/': '/oldClient/'
    }
},
'/oldClient/': {
    target: 'https://newdomain.com',
    pathRewrite: {'/oldClient/': '/api/'}
 }
'/newClient': {
    target: 'https://newdomain.com'
    pathRewrite: {'/newClient': '/api/v1/newClass/newMethod'}
}

}

for complex path rewrite logic you can use pathRewrite function as well

pathReWrite:function(path, req) { /*return path base on your logic*/ return path; }

Upvotes: 1

Related Questions