如何在React中通过JavaScript获取重定向URL并解决CORS问题

你的核心问题是浏览器的跨域安全策略阻止了前端直接请求Twilio的文件URL，而且你用的mode: "no-cors"模式根本无法获取到文件内容——这种模式下fetch返回的是不透明响应（opaque response），既读不到重定向后的真实URL，也拿不到文件数据。下面是几个可行的解决办法：

1. 通过后端代理请求（最通用方案） #

前端跨域限制只针对浏览器发起的请求，后端服务不受这个限制。你可以在自己的后端加一个代理接口，让前端请求这个接口，由后端去调用Twilio的URL并返回文件内容。

示例代码 #

后端（以Express为例）

app.get('/proxy-twilio-file', async (req, res) => {
  const twilioUrl = req.query.url;
  if (!twilioUrl) return res.status(400).send('缺少文件URL');

  try {
    const twilioResponse = await fetch(twilioUrl);
    // 读取文件二进制数据
    const fileBuffer = await twilioResponse.buffer();
    
    // 转发Twilio返回的响应头，保证浏览器能正确识别文件类型和下载行为
    res.set('Content-Type', twilioResponse.headers.get('Content-Type'));
    res.set('Content-Disposition', twilioResponse.headers.get('Content-Disposition'));
    
    res.send(fileBuffer);
  } catch (error) {
    res.status(500).send('获取Twilio文件失败');
  }
});

前端修改后的请求代码

fetch(`/proxy-twilio-file?url=${encodeURIComponent(audioSource.source)}`)
  .then(response => response.blob())
  .then(blob => {
    // 生成下载链接并触发下载
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = downloadUrl;
    // 可以从响应头里提取文件名，这里也可以自定义
    link.download = 'twilio-audio-file';
    document.body.appendChild(link);
    link.click();
    // 清理临时URL
    window.URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(link);
  })
  .catch(err => console.error('下载失败:', err));

2. 配置Twilio的CORS白名单（限资源所有者） #

如果你是这个Twilio资源的拥有者，可以登录Twilio控制台，找到对应媒体资源的CORS设置页面，把你的前端域名添加到允许跨域访问的列表中。这样前端直接用fetch请求Twilio URL就不会触发CORS错误了。

注意：不是所有Twilio服务都支持自定义CORS配置，需要先确认对应产品的官方说明。

3. 使用Twilio SDK获取文件（针对官方资源） #

如果这个文件是Twilio的官方资源（比如通话录音、媒体消息），推荐用Twilio的服务端SDK直接获取文件内容，再返回给前端。这种方式能利用Twilio的身份验证机制，比自己写代理更安全规范。

为什么你的原代码无效？ #

你设置的mode: "no-cors"会让浏览器跳过CORS校验，但代价是完全无法读取响应内容——response的type会变成opaque，url属性也不会返回真实的重定向地址，这种模式只适合加载不需要交互的资源（比如第三方脚本），完全不适合下载文件的场景。

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