Percent-encoding exists because URLs reserve certain characters for structure. ? starts a query, & separates parameters, = binds a name to a value, # starts a fragment. When those characters need to appear *inside* a value, they must be escaped or the URL means something different from what you intended.
Where this bites
OAuth redirect URIs. The redirect_uri parameter contains a full URL, complete with its own query string. Unencoded, the outer URL's parser sees the inner ? and & as its own separators and the redirect is truncated. Every OAuth integration hits this once.
Base64 in a query string. Standard Base64 contains +, which a receiving server decodes as a space. The value then fails to decode. Use Base64URL, or percent-encode first — the Base64 encoder covers the first option.
Credentials with punctuation. A password containing @ or : inside a connection URI terminates the userinfo section early, producing a confusing connection error.
Double encoding
Encoding an already-encoded value gives you %2520 where you meant %20 — the % itself gets encoded to %25. This appears as literal %20 text in the received value.
The reverse is also common: decoding twice turns %253A into : when the value legitimately contained %3A. If a value looks over-escaped, decode once and check before decoding again.
Component versus whole URL
encodeURIComponent escapes everything reserved, including /, ? and &. Use it for a single parameter value.
encodeURI leaves URL structure intact and escapes only genuinely illegal characters. Use it for a complete URL you want to remain a working URL.
This tool encodes components, which is what you want when the value is a parameter.
Never put credentials in a URL
Whatever the encoding, a key in a query string is recorded in: web server access logs, reverse proxy logs, CDN logs, browser history, and the Referer header sent to every third-party resource the destination page loads. It is also visible in any screenshot of the address bar.
Use a header. The cURL generator flags query-parameter authentication for this reason, and the Authorization header builder produces the alternative.
Frequently asked questions
Is a space `%20` or `+`?
Both appear. %20 is correct in a URL path and universally understood. + means a space only in application/x-www-form-urlencoded bodies and query strings, which is why a Base64 + gets turned into a space by form-decoding servers. Prefer %20.
Which characters need encoding?
Reserved: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Unreserved and always safe: letters, digits, -, ., _, ~. Everything else should be encoded.
Why does my encoded URL still break?
Check whether something encoded it again downstream — a template engine, a proxy, or an HTTP client that encodes what you give it. Look for %25 in the received value, which is the signature of double encoding.
Should I encode the whole URL or just parameters?
Just the parameter values. Encoding the whole URL escapes the / and ? that make it a URL, producing a single unusable string.