How can I change the base URL of an AngularJS HTTP call?

Question

My application calls $HTTP many times like this:

    this.$http({
        method: this.method,
        url: this.url
    })

The this.url is always set to something like /app/getdata

Now I have moved the back-end of my application to another server and I will need to get data like this:

https://newserver.com/app/getdata

Is there a way that I can supply a base URL that will be used for all the $http calls?

Set your baseUrl somewhere in app.js and use baseUrl+this.url wherever required. Something like var baseUrl = "newserver.com/";. — Aniket Sinha
– Aniket Sinha, Commented Dec 5, 2014 at 11:54
If your back-end is on different server than the angular app, you might also have use Access-Control-Allow-Origin header. See developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS — StrangeLoop
– StrangeLoop, Commented Dec 5, 2014 at 12:22
You may see Restangular - there you can change base_url with one method. compassinhand.com/2015/08/05/… — changtung
– changtung, Commented Sep 17, 2015 at 9:53

Mr Lister · Accepted Answer · 2016-03-24 21:22:39Z

21

I found a alternative solution instead of <base> tag: written in coffeescript

$httpProvider.interceptors.push ($q)->
  'request': (config)->
    if config.url.indexOf('/api') is 0
      config.url = BASE_URL+config.url
    config

edited Mar 24, 2016 at 21:22

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Mar 16, 2016 at 6:58

roy

2112 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joe Withey Over a year ago

This kind of approach is much more appealing to me. I'd prefer interception to lots of injecting constants into my services.

Kangkan Over a year ago

Can someone point me to some documentation to understand how I may use this?

ZedTuX Over a year ago

See docs.angularjs.org/api/ng/service/$http#interceptors for more details

Mikalai · Accepted Answer · 2014-12-05 11:53:13Z

7

I usually keep settings in angular constants and inject them to services.

answered Dec 5, 2014 at 11:53

Mikalai

1,5258 silver badges21 bronze badges

Comments

ruffin · Accepted Answer · 2021-10-08 19:21:50Z

I tend to keep my urls close to where they are needed. So if I have a service, then I'd keep the base url there; like this: this.rootUrl = '/api/v1/';

This allows me to have additional contextual methods that 'extend' the url.

For example:

this.getBaseUrl = function(client_id, project_id) {
    return this.rootUrl + 'clients/' + client_id + '/projects/' + project_id + '/';
};

Which I can then use like this:

this.createActivity = function(client_id, project_id, activity_name, callback) {
    $http.post(this.getBaseUrl(client_id, project_id) + 'activities', {activity: {name: activity_name}})
        .success(callback)
        .error(this.handlerError);
};

or like this (within the same service):

this.closeActivity = function(activity_id, callback){
    $http.get(this.rootUrl + 'close_activity/' + activity_id)
        .success(callback)
        .error(this.handlerError);
};

Danilo Sampaio · Accepted Answer · 2014-12-05 12:24:52Z

-4

set baseUrl in $rootScope:

app.run(function($rootScope) {
    $rootScope.baseUrl = "https://newserver.com";
});

add $rootScope into your app's controllers:

app.controller('Controller', ['$rootScope', function($rootScope){
    ...

this.$http({
    method: this.method,
    url: $rootScope.baseUrl + this.url
})

answered Dec 5, 2014 at 12:24

Danilo Sampaio

771 silver badge11 bronze badges

1 Comment

Aluan Haddad Over a year ago

This is very poor design. It attaches the shared configuration to an object which exposes hundreds of unrelated concerns. At least use app.value('baseUrl', 'https://newserver.com'); and inject that.

Collectives™ on Stack Overflow

How can I change the base URL of an AngularJS HTTP call?

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related