javascript - 由于 cookie，Wavesurfer 不会绘制带有 CROS 错误的波浪

Question

我使用 wavesurfer ，我收到以下错误:

XMLHttpRequest cannot load https://audiotemp.domain.net/RE65bbf6f0a2760184ab08b3fbf9f1d249.mp3. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://my.domain.net:3000' is therefore not allowed access. The response had HTTP status code 403.

调用已加载，但未绘制波浪，我查看请求网络，发现此调用有两个请求如下:

1. 403 禁止。

1. 304 未修改。

调用加载代码如下:

scope.wavesurfer.load(scope.url);

对于第二张图片，我发现有 cookie 随请求一起发送，如下所示:

Cookie:__zlcmid=TAePb8mwejYLug; calltrk_referrer=https%3A//app.gotomeeting.com/%3FmeetingId%3D306279333; calltrk_landing=https%3A//www.dentalmarketing.net/capture/; calltrk_session_id_150722382=c16eaa33-386f-4ab3-ba8d-b3d0cff070ef; __utma=52313532.1896763581.1423186152.1427741816.1431536946.4; __utmz=52313532.1431536946.4.3.utmcsr=bigleap.com|utmccn=(referral)|utmcmd=referral|utmcct=/utahs-best-brightest/; _ga=GA1.2.1896763581.1423186152; CloudFront-Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9hdWRpb3RlbXAuZGVudGFsbWFya2V0aW5nLm5ldC8qIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNDMzMDE2ODQ5fX19XX0_; CloudFront-Signature=btJ4dYPe3Cv87mQZzb6dkYVOLRcKQbscJ3h-ZJgSWGikNi1nXLuYXCGIwsHJWbhdTRiP8Gjru0mIQyOJdCioOa4tP3sAOSGXl9Cy1T2bM1sahgWZZ3GSk6GMyi21TVy3YsxDEdTUoMipeE0b5CduzcpcquB3hjYtfOUwI6CIrsTXkhajrGAk1rg~6tItPqMtxgmwrRM1oM8th0UgxgPWwVD2pok1ecS5ylwOiXbnSETpQzgXqS0C37bT94KpvafCjaclqgQPNcXrZRqbK~HLh28Gd4IZ3pDzIr3GNe3lkDUVIBYbStDsGZtawnS53ASmGXl3rP~DrPKYlahYX~ajKg__; CloudFront-Key-Pair-Id=APKAJL5DFWOODOOKTH2A

我使用 Node.js 代码放置这些 cookie，如下所示:

res.cookie('CloudFront-Policy',encodedCustomPolicy,{domain :cookieDomainName , path:'/', httpOnly:true,secure:true});
res.cookie('CloudFront-Signature',customPolicySignature,{domain :cookieDomainName , path:'/', httpOnly:true,secure:true});
res.cookie('CloudFront-Key-Pair-Id',cloudFrontKeyPairId,{domain :cookieDomainName , path:'/', httpOnly:true,secure:true}

所以，我需要在第一个请求上放置三个 cookie，以获取调用并绘制它的波浪。

1. 如何在第一次请求时发送 cookie？
2. 调用 wavesurfer 的 load 函数时如何放置 header ？

Answer 1

我在尝试通过 CloudFront CDN 链接渲染 wavesurfer 波形时遇到了类似的问题。我收到 403 禁止错误和消息:

Access to fetch at 'https://cdn.example.com/path/to/audio/file' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled

假设您要生成 CloudFront 策略并在服务器端设置 cookie，您需要同时启用 CORS 并确保 wavesurfer 发送以检索您的文件的 CORS 请求使用适当的凭据(即您的 CloudFront cookie)。

将以下内容添加到您的 Node 服务器文件以启用使用 cookie 发送 CORS 请求:

app.use(cors({ origin: "example.com", credentials: true }));

在客户端，我错过的最重要的事情是在 wavesurfer.create() 上正确配置 xhr 对象

this.wavesurfer = WaveSurfer.create({
      container: this.waveForm.current,
      waveColor: "#D8D8D8",
      progressColor: "#ED2784",
      barRadius: 3,
      cursorColor: "transparent",
      responsive: true,
      xhr: {
        cache: "default",
        mode: "cors",
        method: "GET",
        credentials: "include",
        headers: [
          { key: "cache-control", value: "no-cache" },
          { key: "pragma", value: "no-cache" }
        ]
      }
});

mode: "GET" 属性表示我们正在发送一个包含 Access-Control header 的跨域请求。 credentials: "include" 属性告诉 wavesurfer 在请求中包含 CloudFront cookie。