Search code examples
htmlaudiocorsblobflask-cors

violate CORS policy when use a localhost bloburl in audio

I generated some mp3 data and put it into a blob URL to cache it.

<audio id="memquiz_audio" controls></audio>

let audio_ele = document.getElementById("memquiz_audio");
let audio_data = new Blob(data, {"type": "audio/mp3"});
audio_src_mementry = window.URL.createObjectURL(audio_data);
audio_ele.src = audio_src_mementry; //throw error

The error is

refused to load media from 'blob:http://127.0.0.1:9200/14f854fa-3b6c-4d9e-96e7-4c702aaf4f6f' because it violates the following Content Security Policy directive: "media-src 'self' 127.0.0.1 127.0.0.1:9201 127.0.0.1:9200".

However, 127.0.0.1 is already in both my cors default-src and media-src.

Solution

  • Solution: default-src: 'self' blob:

    rather than: default-src: 'self' "127.0.0.1" blob:

    or default-src: 'self' 'blob:'