Platform: API
Browser: Firefox 87.0
URLs of any relevant observations or pages: any v1 api request. for example: https://api.inaturalist.org/v1/controlled_terms
Screenshots of what you are seeing: Not a screenshot, but here’s a log message:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.inaturalist.org/v1/controlled_terms. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).
Description of problem:
I’ve started making a web app that interacts with the iNaturalist API directly through javascript in the browser, and I’ve been trying to follow the advice on the API recommended practices page.
I followed the advice on that page to include a custom User-Agent
header in all requests. This worked so far in Chrome, but trying it out in Firefox - it hits an error during the pre-flight request which complains that Access-Control-Allow-Headers
does not allow User-Agent
. Removing the User-Agent
header allows it to work in Firefox.
To reproduce
Step 1: Create simple html page with a button
Step 2: onclick of the button execute the following javascript function:
async function testUserAgent() {
getFetchOptions = {
method: 'GET',
headers: {'User-Agent': 'example-user-agent'}
};
await fetch('https://api.inaturalist.org/v1/controlled_terms', getFetchOptions);
}
Step 3: Open the page in Firefox, open dev tools (F12) to the console, then click the button
Step 4: see the error appear in the console
I can post the full html + js if you need.
I’m thinking that either the API recommended practices page is no longer correct and needs changing, or the User-Agent header should be included in Access-Control-Allow-Headers
returned from the api.
Note: This looks like the code in the api for the access control headers.