Next.js 13配置代理/重写，解决Wavesurfer.js调用Google Drive的CORS问题

完全可以通过Next.js的后端API路由转发请求来解决这个问题——后端发起的请求不受浏览器CORS策略限制，刚好能绕过Wavesurfer.js前端直接请求Google Drive音频时的跨域拦截。

具体实现步骤： #

1. 创建代理API路由
   在你的Next.js项目pages/api目录下新建文件（比如proxy-audio.js），编写请求转发逻辑：

export default async function handler(req, res) {
  const { url } = req.query;
  if (!url) {
    return res.status(400).json({ error: '缺少音频URL参数' });
  }

  try {
    const targetUrl = decodeURIComponent(url);
    const response = await fetch(targetUrl, {
      headers: {
        // 模拟浏览器请求头，避免被Google Drive拦截
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
      }
    });

    // 转发音频格式头，确保Wavesurfer能正常识别
    res.setHeader('Content-Type', response.headers.get('Content-Type'));
    // 将后端获取的音频流直接返回给前端
    response.body.pipe(res);
  } catch (err) {
    res.status(500).json({ error: '代理请求失败：' + err.message });
  }
}

2. 修改Wavesurfer的音频源
   不再直接传入Google Drive链接，而是将链接编码后传给代理路由：

// 假设你的Google Drive音频链接为googleDriveUrl
const proxyAudioUrl = `/api/proxy-audio?url=${encodeURIComponent(googleDriveUrl)}`;
// 用代理后的URL加载音频生成波形
wavesurfer.load(proxyAudioUrl);

额外注意事项： #

• URL编码：必须用encodeURIComponent处理Google Drive链接，避免特殊字符导致参数解析错误
• 请求头模拟：Google Drive可能拦截非浏览器标识的请求，添加User-Agent头可降低被拦截概率
• 部署兼容性：Vercel等主流Next.js部署平台默认支持API路由跨域，无需额外配置；自定义服务器需确保未禁用跨域支持
• 缓存优化：若频繁请求同一音频，可在API路由中添加Cache-Control头实现缓存，减少重复请求

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