How are URIs containing umlaut vowels (like ä, ö and ü) encoded in axios?

Viewed 275

I've stumbled across some weird behaviour while using axios to fetch files from an external endpoint.

The endpoints url looks something like this: https://example.com/path/to/file/filename.pdf

When accessing the url using the browser, a download dialog would pop up and request a confirmation in order to download the file.

While this simple GET request seemed to work fine, doing the same using axios did not.

const res = await axios.get("https://example.com/path/to/file/filename.pdf", { responseType: "blob" }); // throws a 400 error

After doing some further digging I decided to try out requesting the url from the same machine using python - this worked without an issue.

import requests

url = 'https://example.com/path/to/file/filename.pdf'
r = requests.get(url)

open('test.pdf', 'wb').write(r.content)

The solution

After some (more) frustration and searching the web for issues without any success I've finally discovered the issue and its solution.

The issue only occured when the filename in the specified url included german characters such as ä, ö or ü. Passing the URL to encodeURI and then calling axios with the returned value did the trick.

const res = await axios.get(encodeURI("https://example.com/path/to/file/filenäme.pdf"), { responseType: "blob" }); // works even with ä, ö, ü in the url

The remaining question

The question that remains is why? Checking the outgoing network requests reveals that the requests seem to go to the same url, meaning the URL in chromes network tab always looked the same. The filename "Lösung" was encoded to be "L%C3%B6sung", no matter if the request was run using the browser, a webpage (axios in the browser), a Node app (axios /w node) or Python. Still, axios seems to handle the encoding different to the other methods.

Perhaps Chromes Network tools parse the displayed url too, meaning the actual request was sent to /Lösung.pdf but was displayed as /L%C3%B6sung.pdf while viewing the outgoing network requests? Is there a setting for URL parsing in the axios configuration I might have missed?

0 Answers
Related