malformed uri error when sending json with % character in angularjs

Question

I have read in many pots that malformed URI error is comes due to the fact that angularjs override the encodeURIComponent with encodeUriQuery.

Is there any way I can override encodeUriQuery in my controller or component without changing angular file?

Answer 1

Both encodeURIComponent and angular.$$encodeUriQuery properly encode % characters:

console.log(angular.$$encodeUriQuery("%"));
console.log(encodeURIComponent("%"));

<script src="//unpkg.com/angular/angular.js"></script>

The % character is disallowed and should never appear in a URL/URI.

There are some characters that are disallowed and should never appear in a URL/URI, reserved characters (described below), and other characters that may cause problems in some cases, but are marked as "unwise" or "unsafe". Explanations for why the characters are restricted are clearly spelled out in RFC-1738 (URLs) and RFC-2396 (URIs). Note the newer RFC-3986 (update to RFC-1738) defines the construction of what characters are allowed in a given context but the older spec offers a simpler and more general description of which characters are not allowed with the following rules.

Excluded US-ASCII Characters disallowed within the URI syntax:

   control     = <US-ASCII coded characters 00-1F and 7F hexadecimal>
   space       = <US-ASCII coded character 20 hexadecimal>
   delims      = "<" | ">" | "#" | "%" | <">

The character "#" is excluded because it is used to delimit a URI from a fragment identifier. The percent character "%" is excluded because it is used for the encoding of escaped characters. In other words, the "#" and "%" are reserved characters that must be used in a specific context.

— Which characters make a URL invalid? — this answer