Angular 8结合TypeScript使用Wavesurfer-js波形不显示报错如何解决

你使用mode: "no-cors"的配置并没有真正解决跨域问题，只是屏蔽了浏览器的跨域错误提示。该模式下请求返回的响应是不透明的，JavaScript无法读取响应的内容、状态码等数据，只能确认请求发送成功。
Wavesurfer默认使用WebAudio作为后端，需要读取完整的音频二进制数据来计算并绘制波形，在no-cors模式下无法拿到音频数据，就会抛出HTTP status 0的错误。
当你添加backend: 'MediaElement'配置后，Wavesurfer会调用原生HTML audio标签播放音频，audio标签本身不受跨域限制可以正常播放，但绘制波形依然需要读取音频原始数据，这一步还是失败，所以会出现能播放但无波形、报错依旧存在的情况。

• 第一步：彻底解决跨域问题，在提供本地音频的服务端配置CORS响应头。需要添加的响应头如下：

  Access-Control-Allow-Origin: http://localhost:你Angular项目的端口号（比如4200）
  Access-Control-Allow-Methods: GET, OPTIONS
  Access-Control-Allow-Headers: *
  

  如果服务端有预检OPTIONS请求的拦截，要配置允许OPTIONS请求直接返回200状态码。
• 第二步：删除Wavesurfer配置中xhr配置里的mode:"no-cors"参数，该参数会导致响应数据无法读取。
• 第三步：如果你暂时无法修改服务端配置，开发阶段可以使用Angular自带的代理转发功能，将音频请求路径代理到本地音频服务器，从根源避免跨域问题。
• 第四步：确认跨域配置生效后，可以删除之前加的backend: 'MediaElement'配置，使用默认的WebAudio后端即可同时实现正常播放和波形渲染。

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