I created a basic video player and I need to use various src files, none of which are stored on the same server as the application.
This is how the video code looks:
<video preload="metadata" @play="onPlay" @pause="onPause" :src="https://xxx.s3.amazonaws.com/sample_960x400.mp4">
</video>
When executing the above code, it functions without any CORS warnings.
However, when attempting a get request of the file using axios:
await axios.get('https://xxx.s3.amazonaws.com/sample_960x400.mp4', {
withCredentials: false,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token',
'Access-Control-Max-Age': 86400
}
})
This results in a CORS error:
Cross-Origin Request Blocked: The Same Origin Policy prevents reading the remote resource at . (Reason: CORS request did not succeed). Status code: (null).
I am utilizing Node.js with Express on the backend, but the files are not being served through my backend since they are hosted in the cloud.
My inquiries include:
- Why does no CORS error occur when the
videotag retrieves the file? - What causes a CORS error with
axios? - How can this be resolved?