由于 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 禁止。

2. 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 的加载功能时如何放置标题？

Answer 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);
});