DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL In React App

user_9412440 0
Viewed 6074

I'm facing with a mysterious error. When I'm trying to send one specific query to the server, I'm receiving the following error

DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
at dispatchXhrRequest (http://localhost:6789/static/js/20.chunk.js:180790:13)
at new Promise (<anonymous>)
at xhrAdapter (http://localhost:6789/static/js/20.chunk.js:180773:10)
at dispatchRequest (http://localhost:6789/static/js/20.chunk.js:181396:10)

And here I logged the actual url string

http://localhost:3000​/users​/5​/payments​/disconnect

If I send the same query but from my hosting to dev server, I see error 404 and url like this

https://example.com/users%E2%80%8B/5%E2%80%8B/payments%E2%80%8B/disconnect

This is my function which sends the query

  const query = `${url}​/users​/${userId}​/payments​/disconnect`;

  console.debug('Url', query);

  try {
    const { status } = await axios.delete(query);
    return status;
  } catch (e) {
    console.debug(e);
    return 500;
  }
}

Interesting thing, all other endpoints work fine. The same behavior on chrome and firefox.

What can cause problems like this?

axios nestjs reactjs rest
1 Answers

%E2%80%8B is a U+200B : ZERO WIDTH SPACE which you've somehow managed to pollute your string with.

You can see them in your source code if you copy/paste the const query = `${url}​/users​/${userId}​/payments​/disconnect`; line into this app.

It is probably most easily removed by editing that line like this:

  1. Position the cursor after the character after the /
  2. Press Backspace until the character before the / is deleted
  3. Retype the three characters you desire
Dorward_190680
Related