Axios中含斜杠的搜索字符串引发404错误，如何解决？

问题原因 #

你的key值包含斜杠/，直接拼到URL路径里时，浏览器会把ABC/23/54解析成三个路径分段，实际请求的URL变成了http://127.0.0.1:5000/items/search/ABC/23/54。而服务器路由大概率只配置了匹配/items/search/[单个参数]的规则，无法识别这种多段路径，所以返回404。

两种可行解决方案 #

方案1：改用查询参数传递（推荐） #

把key放到查询参数里，这样斜杠不会影响路径结构，同时用encodeURIComponent编码特殊字符，避免潜在问题：

const key = "ABC/23/54";
Axios.get(`http://127.0.0.1:5000/items/search?key=${encodeURIComponent(key)}`)
  .then(...)
  .catch(...);

后端只需要从查询参数里获取key的值即可，不需要修改路由结构。

方案2：保持路径参数但适配路由（需后端配合） #

如果必须把key放在路径中，需要两步操作：

1. 前端对key进行编码，确保斜杠被转义：

const key = "ABC/23/54";
const encodedKey = encodeURIComponent(key);
Axios.get(`http://127.0.0.1:5000/items/search/${encodedKey}`)
  .then(...)
  .catch(...);

2. 后端配置支持接收包含斜杠的路径参数，比如用Flask的话，路由要写成：

@app.route('/items/search/<path:key>')
def search_items(key):
    # 这里的key会自动解码，直接使用即可
    decoded_key = key  # Flask会自动处理解码
    # 后续逻辑

其他后端框架也有类似的配置方式，核心是让路由规则允许参数包含路径分隔符。

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