Platform: Mobile (surfaced on user-created app “Wildspots“)
App version number, if a mobile app issue: any
Browser, if a website issue: n/a
URLs (aka web addresses) of any relevant observations or pages: e.g. https://static.inaturalist.org/sounds/1041949.m4a?1715894612
Screenshots of what you are seeing: n/a
Description of problem: I am trying to fetch an audio file with Javascript, for client-side further processing (creating a spectrogram). This throws a CORS error (while returning a 200 response code) when called from a local web page or an Ionic/Cordova app, because of the request’s localhost origin. Fetching a photo file from the amazon servers (e.g. https://inaturalist-open-data.s3.amazonaws.com/photos/32019292/square.jpg) does not cause this problem. I retrieved the sound file’s URL by calling the observations API (https://api.inaturalist.org/v2/observations/9ce15831-9703-4022-a378-a4e6018eda77) and evaluating the resulting observation’s “sounds” property.
Step 1: Create a file index.js with the following content:
window.onload = function() {
fetch( 'https://static.inaturalist.org/sounds/1041949.m4a?1715894612' ).then( ( response ) => {
console.log( 'This worked!' );
} ).catch( e => {
console.error( 'This did not work', e );
} );
}
Step 2: Create a file index.html with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/test.js"></script>
</head>
<body>
Sound fetch test.
</body>
</html>
Step 3: Open index.html in your browser.
Step 4: Check the console output. Instead of ‘This worked!‘ it will read ‘This did not work TypeError: Failed to fetch‘.
