包含ä、ö、ü等变音字符的URI在axios中如何正确编码？

问题描述 #

使用axios从外部端点拉取文件时遇到异常情况。
对应的端点URL类似如下格式：
https://example.com/path/to/file/filename.pdf

通过浏览器访问该URL时，会弹出下载确认对话框，可正常下载文件。这个简单的GET请求在浏览器中运行正常，但使用axios发起相同请求却抛出400错误：

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

进一步排查时，在同一台机器上使用Python发起请求无任何异常：

import requests

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

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

解决方案 #

经过多次调试后找到了问题原因和解决方案：
该问题仅当URL中的文件名包含ä、ö、ü这类德语特殊字符时才会触发，将URL传入encodeURI处理后再传给axios发起请求即可解决问题：

const res = await axios.get(encodeURI("https://example.com/path/to/file/filenäme.pdf"), { responseType: "blob" });

遗留疑问 #

目前仍存在待确认的疑问：
检查发出的网络请求发现，所有请求的URL在Chrome的网络面板中展示的内容始终相同。不管是通过浏览器直接访问、浏览器内运行axios发起请求、Node环境运行axios发起请求还是Python发起请求，文件名“Lösung”都会被展示为编码后的“L%C3%B6sung”，但axios的编码处理逻辑似乎和其他方式存在差异。

• 是否是Chrome的网络工具对展示的URL做了解析，实际请求发送的是/Lösung.pdf，但在对外展示时显示为/L%C3%B6sung.pdf？
• axios的配置中是否存在遗漏的URL解析相关设置？

内容的提问来源于stack exchange，提问作者aseidma