由于 cookie，Wavesurfer 不会使用 CROS 错误绘制波浪

Posted 2023-02-19

【中文标题】由于 cookie，Wavesurfer 不会使用 CROS 错误绘制波浪

【英文标题】：Wavesurfer doesn't draw wave with CROS Error because of cookies

【发布时间】：2015-08-12 21:14:28

【问题描述】：

我使用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.

调用已加载，但未绘制波形，我检查了请求网络，发现此调用的两个请求如下：

403 禁止。

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，以获取调用并绘制它的波形。

如何在第一次请求时发送 cookie？ 调用wavesurfer的加载函数时如何放置header？

【问题讨论】：

CORS 是跨域资源共享的缩写。在不使用 CORS 的情况下，您只能从与资源相同的域中请求资源。在客户端无法规避这一点。如果您无权访问服务器（正如您在 cmets 中对另一个答案所述），那么您将无法访问该资源。资源所有者是否允许您访问，他们将为您提供有关如何使用资源的正确信息。

另外，您不能劫持其他网站放置的 cookie 以绕过其访问限制并自己访问资源，就像您似乎正在尝试做的那样。

【参考方案1】：

您需要为静态服务器设置 CORS 标头。你可以使用cors lib。

var express   = require('express');
var proxy     = require('express-http-proxy');
var cors      = require('cors');

var app = express();

// Enable CORS
app.use(cors( 
  exposedHeaders: ['Content-Length',
                   'Content-Type'] 
));

// Serve static
app.use('/', express.static('public'));

// Proxy to media server
app.use('/media', proxy('http://%MEDIA_SERVER_ADDRESS%', 
  forwardPath: function(req, res) 
    return '/media';
  
));

// Start server
var server = app.listen(3000, function () 
  var host = server.address().address;
  var port = server.address().port;

  console.log('Server listening at http://%s:%s', host, port);
);

【讨论】：

我无法访问这些音频的服务器，你认为我需要从前端开发一些东西来传递请求中的 cookie 吗？

如果您无法访问媒体服务器，您可以使用代理服务器添加 CORS 标头以进行响应。检查编辑的答案。如果没有 CORS 标头，您将无法从客户端发出跨域请求。另外，you can't extract audio data 来自<audio> 标签。

没有。您无法绕过客户端的同源策略。

@Quentin 我们已经在亚马逊方面允许使用 CORS 域，它们是 amazons3 和 cloudfront，您对我的问题有更多建议吗？ - 谢谢

【参考方案2】：

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

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）。

将以下内容添加到您的节点服务器文件以启用使用 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 标头的跨域请求。 credentials: "include" 属性告诉 wavesurfer 在请求中包含 CloudFront cookie。