音频播放器本地运行正常 上传服务器后触发replace相关TypeError报错

问题根因 #

报错提示调用replace方法的对象是undefined，说明运行到这段代码时，要么data对象本身未定义，要么data.currentSong/data.currentArtist这两个属性的值是undefined，只有字符串类型的变量才能调用replace方法。

本地运行正常、服务器运行报错，是两个环境的数据获取/解析逻辑出现了差异，你可以按以下步骤排查：

• 先给代码加防御性兜底，避免报错阻塞页面运行，修改后代码如下：

// 用可选链判断属性是否存在，空值合并兜底为空字符串，避免调用replace时报错
let song = (data?.currentSong ?? '').replace(/'/g, '\'');
currentSong = song.replace(/&/g, '&'); // 这里原代码替换值写的&不需要转义，直接写&即可

let artist = (data?.currentArtist ?? '').replace(/'/g, '\'');
currentArtist = artist.replace(/&/g, '&');

• 完成上述修改后，在服务器环境的控制台打印console.log(data)，对比和本地打印的data结构是否一致：
  • 检查字段名大小写是否有差异，部分后端服务部署后会把驼峰字段转成下划线格式，比如返回current_song而非currentSong
  • 检查接口请求是否正常，本地调试时可能配置了接口代理，部署到服务器后未配置跨域规则、接口路径写错都会导致接口请求失败，拿到的data为空
  • 检查代码执行时序，确保这段处理代码是在接口请求成功拿到data之后才执行，不要放在异步请求逻辑外同步执行，避免服务器接口响应较慢时，data还未赋值就执行了处理逻辑
  • 检查服务器返回的接口响应头Content-Type是否为application/json，如果被错误设置为普通文本类型，会导致JSON解析失败，拿到的data结构异常

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