Wavesurfer doesn't draw wave with CROS Error because of cookies

Question

I use wavesurfer, I get the following error:

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.

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.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

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 ?

Answer 1

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.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

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.com", 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.