TypeError [ERR_UNESCAPED_CHARACTERS] Request path contains unescaped characters

# TypeError [ERR_UNESCAPED_CHARACTERS] Request path contains unescaped characters

The error "TypeError [ERR_UNESCAPED_CHARACTERS] Request path contains unescaped characters" occurs when the URL you are making an HTTP request to contains unescaped characters.

To solve the error, use the encodeURI() method to encode the URL before making the request.

index.js

Copied!
const url = 'https://example.com/some-path 1 2 % 3';

// 👇️ encode the URL
const encodedURL = encodeURI(url);

// make an HTTP request using the encoded URL

Here is a complete example of using the encodeURI() function with axios.

index.js

Copied!
import axios from 'axios';

async function makeRequest() {
  const url = 'https://example.com/some-path 1 2 % 3';

  // 1) Encode the URI
  const encodedURL = encodeURI(url);

  try {
    // 2) Make an HTTP request using the encoded URI
    const res = await axios.get(encodedURL, {
      method: 'GET',
    });
    const data = res.data;
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}

makeRequest();

The code for this article is available on GitHub

The same approach can be used to encode the URL when using the native fetch() function.

index.js

Copied!
async function getUser() {
  const url = 'https://example.com/some-path 1 2 % 3';

  // 1) Encode the URI
  const encodedURL = encodeURI(url);

  try {
    // 2) Make an HTTP request using the encoded URI
    const response = await fetch(encodedURL, {
      method: 'GET',
    });

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    const result = await response.json();
    return result;
  } catch (err) {
    console.log(err);
  }
}

getUser();

The code for this article is available on GitHub

The encodeURI() function encodes a URI by replacing each instance of certain special characters by one, two, three or four escape sequences representing the UTF-8 encoding of the character.

index.js

Copied!
const url = 'https://example.com/some-path 1 2 % 3';

const encodedURL = encodeURI(url);

// https://example.com/some-path%201%202%20%25%203
console.log(encodedURL);

using encode uri function

Note that there is also a decodeURI() function that decodes a URI that was previously created by enodeURI().

index.js

Copied!
const url = 'https://example.com/some-path 1 2 % 3';

const encodedURL = encodeURI(url);

// 👇️ https://example.com/some-path%201%202%20%25%203
console.log(encodedURL);

const decodedURL = decodeURI(encodedURL);

// 👇️ https://example.com/some-path 1 2 % 3
console.log(decodedURL);

Make sure you haven't added a space to your path by mistake.

For example, the following path.

shell

Copied!
# ⛔️
https://example.com/some path

Should probably be one of the following.

shell

Copied!
# ✅
https://example.com/some-path

https://example.com/somepath

# Using the `encodeURIComponent` function instead

There is also an encodeURIComponent() function that encodes a URI by replacing certain characters with escape sequences representing the UTF-8 encoding of the characters.

Compared to encodeURI(), this function encodes more characters including those that are part of the URI syntax.

The parameter the method takes is a string that you want to encode as a URI component (a path, a query string, a fragment, etc).

index.js

Copied!
const domain = 'https://example.com';

const path = 'some-path 1 2 % 3';

// 👇️ encode the path
const encodedPath = encodeURIComponent(path);

const encodedURI = domain + encodedPath;

// 👇️ https://example.comsome-path%201%202%20%25%203
console.log(encodedURI);

Encode the path of the URL and then make the HTTP request using the encoded URI.

There is also a decodeURIComponent() function that decodes a URI that was previously created by encodeURIComponent().

index.js

Copied!
const domain = 'https://example.com';

const path = 'some-path 1 2 % 3';

const encodedPath = encodeURIComponent(path);

const encodedURI = domain + encodedPath;

// 👇️ https://example.comsome-path%201%202%20%25%203
console.log(encodedURI);

const decodedURI = decodeURIComponent(encodedURI);

// 👇️ https://example.comsome-path 1 2 % 3
console.log(decodedURI);

# Using the URL() constructor in Node.js

If your code runs in Node.js (and not in a browser), you can also use the URL() constructor to encode the URL.

index.js

Copied!
const url = 'https://example.com/some-path 1 2 % 3';

const encodedURI = new URL(url);

// URL {
//   href: 'https://example.com/some-path%201%202%20%%203',
//   origin: 'https://example.com',
//   protocol: 'https:',
//   username: '',
//   password: '',
//   host: 'example.com',
//   hostname: 'example.com',
//   port: '',
//   pathname: '/some-path%201%202%20%%203',
//   search: '',
//   searchParams: URLSearchParams {},
//   hash: ''
// }

console.log(encodedURI);

The code for this article is available on GitHub

You can then directly pass the encoded URI to the fetch() function.

index.js

Copied!
async function getUser() {
  try {
    const response = await fetch(encodedURI);

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    const result = await response.json();
    return result;
  } catch (err) {
    console.log(err);
  }
}

console.log(await getUser());

The code for this article is available on GitHub

Here is a working example that uses a real API URL.

index.js

Copied!
async function getUser() {
  const url = 'https://randomuser.me/api/';

  const encodedURI = new URL(url);
  console.log(encodedURI);

  try {
    const response = await fetch(encodedURI);

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    const result = await response.json();
    return result;
  } catch (err) {
    console.log(err);
  }
}

console.log(await getUser());

using node url constructor to encode url

The code for this article is available on GitHub

Make sure to only use the new URL() constructor in Node.js.

If your code runs on the browser, you have to use the encodeURI() or encodeURIComponent() functions from the previous subheadings.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError [ERR_UNESCAPED_CHARACTERS] Request path contains unescaped characters