CODEWITHSUNDEEP
javascriptreactjshttpreduxaxios
Tony
Tony

Reputation: 159

Why does the website url is appending when I call an proxy server api

I am working on a react application . I configured proxy using module http-proxy-middleware.

At flags page , website url looks like //localhost:9000/flags/all .

When user clicks on a button in flags page , I need to call sparkle(rest service) api and should load the result. When I call the sparkle api , internally website url is also appending and the api call is forming like http://SGD01D:10700/all/sparkle/flags instead of //SGD01D:10700/sparkle/flags . Why "all" is appending to the api call? How to solve this issue

//server
app.use('/sparkle', proxy(proxies.sparkle_config()));

 //Proxy config
class proxies {
  static sparkle_config() {
    return {
      target: 'http://SGD01D:10700', // target host
      changeOrigin: true // needed for virtual hosted sites
    };
  }
}

export default proxies;


//React action
//redux-thunk
export function loadFlags() {
  return function(dispatch) {
    dispatch(beginAjaxCall());

    const promise = axios({url: 'sparkle/v1/api/flag', timeout: 20000, method: 'get', responseType: 'json'});

    promise.then(function(flags) {              
      dispatch(loadFlagsSuccess(flags));
    }).catch(function(error) {
      throw(error);
    });

  };
}

Upvotes: 0

Views: 955

Answers (1)

Dez
Dez

Reputation: 5838

It looks like a problem because relative paths in your API call. I would call the API with Axios with an absolute path:

const promise = axios({url: '/sparkle/v1/api/flag', timeout: 20000, method: 'get', responseType: 'json'});

Upvotes: 1

Related Questions