angular-resource.js encodeUriSegment Issue

Question

I have an issue querying restful resources when the resource uri has several subpaths :

Example :

.factory('SomeFactory', function ($resource) {
return $resource('/path/subPath/otherSubPath/:id', {}, {
show: { method: 'GET', params: { id: '@id' } }
})
}) ;

When I invoke SomeFactory.show in a controller I get the error the server responded with a status of 400 (Bad Request) This is because the browser is looking for the uri :

http://server/path/subPath%2FotherSubPat/id

Notice the %2F replacing the / (slash) in the uri , I have tried many tricks in javascript to make this work ; But the only solution was to add the following last line replace(/%2F/gi, '/'); in angular-resource.js encodeUriSegment method .

Please tell me if this approach is correct .

function encodeUriSegment(val) {
  return encodeUriQuery(val, true).
    replace(/%26/gi, '&').
    replace(/%3D/gi, '=').
    replace(/%2B/gi, '+').
    replace(/%2F/gi, '/');
}

Thanks .

score 1 · Answer 1 · answered Feb 18 '14 at 14:21

it seems like you have already bumped into this issue opened on github:

https://github.com/angular/angular.js/issues/1388#issue-6979382

where the approach you've taken is suggested. As far as I am concerned, as I had the same issue as you, I preferred to have multiple services (one for each subpath) rather than modifying angular-resource.js - I prefer to not modify core lib files as any updates will wipe those changes.

Hopefully a flag to se the uri encoding will be added to Angular to solve this problem.

score 1 · Answer 2 · answered Aug 25 '15 at 15:50

You can use http interceptor:

module.constant("interceptULRS",
  [new RegExp('.+/path/.*')]);

module.config(['$httpProvider', 'interceptULRS', function($httpProvider, interceptULRS) {
var ENCODED_SLASH = new RegExp("%2F", 'g');
$httpProvider.interceptors.push(function ($q) {
  return {
    'request': function (config) {
      var url = config.url;

      for (var i = 0; i < interceptULRS.length; i++) {
        var regex = interceptULRS[i];
        if (url.match(regex)) {
          url = url.replace(ENCODED_SLASH, "/");

          // end there is only one matching url
          break;
        }
      }

      config.url = url;
      return config || $q.when(config);
    }
  };
});
}]);

Keep in mind that it will intercept all URLs.

score 0 · Answer 3 · answered Apr 10 '17 at 14:02

Building off of @Pavol I think you can pare the request function down to

var ENCODED_SLASH = new RegExp("%2F", 'g');
var request = function (config) {
    var matches = config.url.match(ENCODED_SLASH);
    if (matches && matches.length) {
        config.url = config.url.replace(ENCODED_SLASH, "/");
    }
    return config || $q.when(config);
};

if you don't need ENCODED_SLASH elsewhere, and don't care where the "%2F"s are in the url.

As I work more and more with the angular-resource I'm finding using and understanding the $httpProvider.interceptors to be more important.

angular-resource.js encodeUriSegment Issue

3 Answers3