How to fix: Double-encoding produces %2520 instead of %20

Encoding an already-encoded string encodes the `%` to `%25`. The result is `%2520` (double-encoded space) instead of `%20`. Fix: 1. Use the URL Decoder tool to check if your string is already encoded. 2. If `%25` appears in your string, it was double-encoded. 3. Decode once before re-encoding, or skip the extra encoding step. 4. In code, only call `encodeURIComponent()` once per value.

How to fix: Space encoded as + vs %20

`+` encodes spaces only in `application/x-www-form-urlencoded` (HTML form data). In URL path segments and most modern contexts, use `%20`. Fix: 1. For query string values from HTML forms, `+` is correct (servers handle it). 2. For URL path segments, use `encodeURIComponent()` which produces `%20`. 3. Use `new URLSearchParams()` for query strings — it handles encoding automatically.

How to fix: Entire URL encoded instead of just the parameter

`encodeURIComponent()` encodes everything including `/`, `?`, `&`, `=`. Use it only for parameter values, not entire URLs. Fix: 1. Identify which parts are parameters vs URL structure. 2. Encode only the parameter values with `encodeURIComponent()`. 3. Use `new URL()` to construct URLs safely.

How to fix: Non-ASCII characters in URLs

URLs must be ASCII. Non-ASCII characters (accented letters, CJK, emoji) must be percent-encoded using their UTF-8 byte representation. Fix: 1. Use the URL Encoder tool — it handles UTF-8 to percent-encoding automatically. 2. In code, `encodeURIComponent()` handles Unicode correctly. 3. For domain names, use Punycode (handled by the browser automatically for `new URL()`).

Encoding 2026-03-10

Fix URL Encoding & Decoding Errors

Fix double-encoding bugs, plus-sign vs %20 confusion, partial encoding issues, and Unicode URL failures.

🔗 Tool: URL Encoder — Free

URL encoding bugs are among the most subtle web bugs — they produce requests that almost work, making them hard to diagnose. Here are the five most common URL encoding mistakes and their fixes.

Jump to error

1 Double-encoding produces %2520 instead of %20
2 Space encoded as + vs %20
3 Entire URL encoded instead of just the parameter
4 Non-ASCII characters in URLs

Double-encoding produces %2520 instead of %20

Error message

URL parameter arrives server-side as '%20hello' instead of ' hello'

Root cause

Encoding an already-encoded string encodes the `%` to `%25`. The result is `%2520` (double-encoded space) instead of `%20`.

Step-by-step fix

1 Use the URL Decoder tool to check if your string is already encoded.
2 If `%25` appears in your string, it was double-encoded.
3 Decode once before re-encoding, or skip the extra encoding step.
4 In code, only call `encodeURIComponent()` once per value.

Wrong

encodeURIComponent(encodeURIComponent('hello world'))  // 'hello%2520world'

Correct

encodeURIComponent('hello world')  // 'hello%20world'

Space encoded as + vs %20

Error message

Server receives '+' instead of space in URL path segment

Root cause

`+` encodes spaces only in `application/x-www-form-urlencoded` (HTML form data). In URL path segments and most modern contexts, use `%20`.

Step-by-step fix

1 For query string values from HTML forms, `+` is correct (servers handle it).
2 For URL path segments, use `encodeURIComponent()` which produces `%20`.
3 Use `new URLSearchParams()` for query strings — it handles encoding automatically.

Wrong

// Wrong for URL path:
const path = '/search/' + str.replace(/ /g, '+');

Correct

// Correct for URL path:
const path = '/search/' + encodeURIComponent(str);

Entire URL encoded instead of just the parameter

Error message

404 Not Found — URL path slashes (%2F) are encoded

Root cause

`encodeURIComponent()` encodes everything including `/`, `?`, `&`, `=`. Use it only for parameter values, not entire URLs.

Step-by-step fix

1 Identify which parts are parameters vs URL structure.
2 Encode only the parameter values with `encodeURIComponent()`.
3 Use `new URL()` to construct URLs safely.

Wrong

const url = encodeURIComponent('https://api.example.com/users?name=Alice');

Correct

const url = new URL('https://api.example.com/users');
url.searchParams.set('name', 'Alice');
// url.toString() → correct, encoded URL

Non-ASCII characters in URLs

Error message

400 Bad Request — invalid characters in URL

Root cause

URLs must be ASCII. Non-ASCII characters (accented letters, CJK, emoji) must be percent-encoded using their UTF-8 byte representation.

Step-by-step fix

1 Use the URL Encoder tool — it handles UTF-8 to percent-encoding automatically.
2 In code, `encodeURIComponent()` handles Unicode correctly.
3 For domain names, use Punycode (handled by the browser automatically for `new URL()`).

Wrong

fetch('https://api.example.com/search?q=café')

Correct

fetch(`https://api.example.com/search?q=${encodeURIComponent('café')}`)  // 'caf%C3%A9'

Frequently Asked Questions

What is the difference between encodeURI() and encodeURIComponent()?

`encodeURI()` encodes an entire URL but preserves structural characters like `/`, `?`, `=`, `&`. `encodeURIComponent()` encodes everything including those characters — use it for individual parameter values.

Why does my API return 400 for special characters in query params?

The parameter value is likely not encoded or is double-encoded. Use the URL Encoder to check the exact bytes being sent. `new URLSearchParams()` is the safest way to build query strings.

Related Tools

B64

Base64 Encode/Decode

Encode & decode Base64 strings

{ }

JSON Formatter

Format, minify & validate JSON

HTML Entity Encoder

Encode & decode HTML entities

Try the URL Encoder now

Free, runs in your browser, no signup required. Learn more about URL Encoder.

Open URL Encoder →

← All Troubleshooting Guides