如何处理带#字符的URL 解决Laravel访问含#图片返回404问题

URL中的#属于片段标识符，浏览器发起请求时不会将#及之后的内容发送到服务端，因此你请求KM_72#050#500.svg时，服务端实际只收到了KM_72的路径请求，找不到对应文件就返回404。

• 方案1：输出URL时对文件名做URL编码（最推荐）
  #对应的URL编码为%23，你只需要在生成图片URL时，对文件名部分单独做URL编码即可，不需要修改磁盘上存储的原始文件名。
  Laravel后端生成示例：

// 原始文件名保持不变
$originFilename = 'KM_72#050#500.svg';
// 仅对文件名做URL编码，路径部分不编码
$imageUrl = asset('storage/images/' . rawurlencode($originFilename));

前端动态生成示例：

const originFilename = 'KM_72#050#500.svg'
const imageUrl = `/storage/images/${encodeURIComponent(originFilename)}`

编码后的URL为你的域名/storage/images/KM_72%23050%23500.svg，浏览器会将完整路径发送给服务端，Nginx/Apache等web服务器默认会自动将%23解码为#后匹配磁盘文件，访问完全正常。

• 方案2：web服务层重写规则适配（可选）
  如果不想修改代码中URL生成的逻辑，也可以在web服务器层添加重写规则，将收到的不完整路径自动补全，但这种方案兼容性差，容易出现异常，更推荐使用第一种编码方案。

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