-2

Ive been trying to use an mp3 file from a lyrics API - https://lyrics.ovh in a HTML audio element. But Ive been getting the following cors error (it doesnt happen locally, but when i deploy to gitpages it occurs).

Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID

This is how Ive been trying to solve it:

I have tried one of the solutions as mentioned here: No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API, to deploy my own proxy to Heroku. It works for one url I need, but for the one containing the mp3 path it doesnt. The response returns status:200, but I get error :unexpected token in JSON.

console error:

GET http://127.0.0.1:5500/[object%20Promise] 404 (Not Found) script.js:89 Uncaught (in promise) SyntaxError: Unexpected token I in JSON at position 0

const cors = https://my-proxy.herokuapp.com


// get Mp3 
 async function getMP3(url) {
    const res = await fetch(`${cors}/${url}`, {
    headers: {
              "Content-Type": "audio/mpeg",
              Accept: "audio/mpeg",
            },
    });
    const data = await res.json();   // this line causes the error
 }

// example of url: (proxy url + path to mp3)

https://my-proxy.herokuapp.com/http://cdn-preview-e.deezer.com/stream/c-e6b5f2295c3af5280cc00b3bf842ff57-9.mp3

// audio element

<audio controls>
    <source src="${getMP3(url)}" type="audio/mpeg">       
</audio>
sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
user6086008
  • 101
  • 3
  • 14
  • Has this been resolved? If so, and the answer was helpful to you, please mark it as "Accepted". Otherwise, if you'd like some more clarification, just say so. – Eliezer Berlin Oct 24 '20 at 22:02

1 Answers1

0

ERR_CERT_COMMON_NAME_INVALID is an HTTPS error, not a CORS error. It means that the SSL certificate of the domain you're attempting to connect to is invalid.

More specifically, ERR_CERT_COMMON_NAME_INVALID means it's invalid because the SSL certificate is registered to a different domain(Or subdomain) than the domain you're attempting to connect to.

Eliezer Berlin
  • 3,170
  • 1
  • 14
  • 27
  • @user6086008 If you give us the exact URL of the API, we can give you more information about the error. But you can check yourself simply by putting the URL of the API into your chrome address bar, opening up Chrome's Dev tools, and going to the "Security" tab. – Eliezer Berlin Oct 18 '20 at 15:31
  • The error on Security tab says `This page is not secure. Resources - mixed content`. Sample project can be found here: **https://trinajoy.github.io/lyrics-search** - search for a song and press 'lyrics' - and see the audio element wont play, and console error about `ERR_CERT_COMMON_NAME_INVALID`. Sample url for audio element is: http://cdn-preview-e.deezer.com/stream/c-e6b5f2295c3af5280cc00b3bf842ff57-9.mp3 – user6086008 Oct 19 '20 at 06:52
  • @user6086008 As you can see when connecting to that sample URL in chrome using HTTPS, you get an error. The error says the HTTPS certificate is only valid for `a248.e.akamai.net`. You'll need to fix your HTTPS on the server `cdn-preview-e.deezer.com`, or connect using that domain name instead. – Eliezer Berlin Oct 19 '20 at 12:47
  • @user6086008 Can you contact your hosting provider and get them to fix it? Or are you managing it? – Eliezer Berlin Oct 19 '20 at 12:51
  • By the way, the error I'm referring to is on this link: https://cdn-preview-e.deezer.com/stream/c-e6b5f2295c3af5280cc00b3bf842ff57-9.mp3 – Eliezer Berlin Oct 19 '20 at 12:56
  • (Of course, you can *also* change "HTTPS" to "HTTP" for all your URLS, and that should fix the problem too...... But I don't know if that's the solution you want.) – Eliezer Berlin Oct 19 '20 at 13:24
  • Im just deploying this project to github pages. – user6086008 Oct 19 '20 at 15:11
  • add chrome extension 'Allow CORS' seemed to fix the issue – user6086008 Oct 19 '20 at 15:35