I use wavesurfer, I get the following error:

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

The call is loaded, but the wave wasn't drawn, I check the network of requests and I found two requests for this call as the following:

1. 403 Forbidden.

2. 304 Not Modified.

The code of loading the call as the following:

scope.wavesurfer.load(scope.url);

For the second image I find there's cookies send with the request as the following:

Cookie:__zlcmid=TAePb8mwejYLug; calltrk_referrer=https%3A//app.gotomeeting/%3FmeetingId%3D306279333; calltrk_landing=https%3A//www.dentalmarketing/capture/; calltrk_session_id_150722382=c16eaa33-386f-4ab3-ba8d-b3d0cff070ef; __utma=52313532.1896763581.1423186152.1427741816.1431536946.4; __utmz=52313532.1431536946.4.3.utmcsr=bigleap|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

I put this cookies using Node.js Code as the following:

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}

So, I need to put three cookies on the first request, to get the call and draw the wave of it.

1. How can I send cookies with first request ?
2. How can I put header when I call load function of wavesurfer ?

I use wavesurfer, I get the following error:

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

The call is loaded, but the wave wasn't drawn, I check the network of requests and I found two requests for this call as the following:

1. 403 Forbidden.

2. 304 Not Modified.

The code of loading the call as the following:

scope.wavesurfer.load(scope.url);

For the second image I find there's cookies send with the request as the following:

Cookie:__zlcmid=TAePb8mwejYLug; calltrk_referrer=https%3A//app.gotomeeting./%3FmeetingId%3D306279333; calltrk_landing=https%3A//www.dentalmarketing/capture/; calltrk_session_id_150722382=c16eaa33-386f-4ab3-ba8d-b3d0cff070ef; __utma=52313532.1896763581.1423186152.1427741816.1431536946.4; __utmz=52313532.1431536946.4.3.utmcsr=bigleap.|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

I put this cookies using Node.js Code as the following:

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}

So, I need to put three cookies on the first request, to get the call and draw the wave of it.

1. How can I send cookies with first request ?
2. How can I put header when I call load function of wavesurfer ?

• javascript
• angularjs
• node.js
• cookies
• amazon-web-services

• CORS is short for Cross Origin Resource Sharing. without using CORS, you can only request resources from the same domain as the resource. It is not possible to circumvent this on the client side. If you do not have access to the server (as you have stated in ments to another answer) then you cannot access the resource. It is up to the resource owner to allow you access, and they will provide you with the correct info as to how to consume the resource. – Claies Commented May 31, 2015 at 20:33
• also, you can't hijack cookies placed by another website to bypass their access restrictions and access the resources yourself, as you appear to be trying to do. – Claies Commented May 31, 2015 at 20:35

2 Answers 2

I faced a similar problem trying to get the wavesurfer waveform to render via a CloudFront CDN link. I was receiving 403 Forbidden errors and the message:

Access to fetch at 'https://cdn.example./path/to/audio/file' from origin 'https://example.' 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

Assuming you are generating a CloudFront policy and setting your cookies server-side, you need to both enable CORS and ensure that the CORS request that wavesurfer sends to retrieve your file uses the appropriate credentials (i.e. your CloudFront cookies).

Add the following to your node server file to enable sending CORS requests with cookies:

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

On the client, the big thing i missed was configuring the xhr object correctly on wavesurfer.create()

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" }
        ]
      }
});

The mode: "GET" attribute indicates that that we are sending a cross-origin request that includes Access-Control headers. The credentials: "include" attribute tells wavesurfer to include the CloudFront cookies in the request.

You need to set CORS headers for static server. You can use 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);
});