如何解决仅在远程服务器上出现的Source Map报错问题

核心错误本质是服务器返回了HTML格式的4xx/5xx错误页面（页面首字符为<），而非正常JSON格式的source map文件，所以触发JSON解析报错。本地无报错是因为本地运行环境没有权限、访问规则类限制，路径匹配完全正常。

具体可分为4类常见原因：

• Unix文件权限不足：FTP上传到Unix服务器后，.map后缀文件的读权限未对Apache运行用户（通常为www-data）开放，Apache无法读取文件返回403错误页。你放在根目录的leaflet.css无报错，恰好是因为根目录文件权限配置符合要求。
• Apache访问规则拦截：Apache全局配置或站点目录下的.htaccess文件存在规则，禁止了.map后缀文件的访问，或者将对应路径的请求重定向到了HTML入口页（比如单页应用的路由重写规则误匹配了map文件）。
• sourceMappingURL相对路径匹配错误：编译后的JS/CSS文件内注释的sourceMappingURL=xxx.map是相对路径，你现有文件结构中map文件的存放位置和编译时指定的输出路径不一致，导致浏览器请求路径错误返回404页。
• FTP传输模式错误：上传时使用ASCII模式传输.map文件，导致文件内容损坏无法被识别，服务器返回错误页。

• 修正文件权限：将所有.map文件的权限设置为644，所属目录权限设置为755，确保Apache运行用户可读。如果可登录SSH可执行命令 chmod 644 你的map文件存放路径/*.map，FTP工具也可右键文件直接修改权限属性。
• 调整Apache访问规则：在站点根目录的.htaccess文件中添加规则，放行所有.map文件的访问，示例配置：

<FilesMatch "\.map$">
    Allow from all
    Require all granted
</FilesMatch>

如果是单页应用站点，在现有路由重写规则前添加判断，跳过.map后缀的请求：

RewriteCond %{REQUEST_URI} !\.(map)$

• 修正sourceMappingURL路径：如果你的map文件和对应JS/CSS文件不在同一级目录，修改编译工具（Webpack、Vite等）的sourceMap输出路径配置，确保生成的sourceMappingURL注释的相对路径和你线上的文件结构匹配即可，无需移动其他文件位置。
• 重新上传文件：将FTP传输模式改为二进制模式后，重新上传所有.map文件，避免文件传输损坏。

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