Try to detect errors due to CORS when fetch fails

[will-moore]

Fixes #24.

See https://stackoverflow.com/questions/19325314/how-to-detect-cross-origin-cors-error-vs-other-types-of-errors-for-xmlhttpreq Although there is no easy way to tell if a request failed due to CORS, the above question did provide a workaround: repeat the request with no-cors mode and if that succeeds, then the original request likely failed due to CORS.

The request error handling should now cover 3 failures:

• no server at-all (or no connection):

• server with CORS issues:

• 404 not found:

[netlify[bot]]

✅ Deploy Preview for ome-ngff-validator ready!

Name	Link
🔨 Latest commit	ead2f9c2f6210de18d2f7ad3213b237d30debe90
🔍 Latest deploy log	https://app.netlify.com/sites/ome-ngff-validator/deploys/6409f87542bb8e0008900f5c
😎 Deploy Preview	https://deploy-preview-25--ome-ngff-validator.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[will-moore]

Hi @AlanMWatson - could you try the deploy preview above at https://deploy-preview-25--ome-ngff-validator.netlify.app/ ?

[AlanMWatson]

Hi Will,

Thanks for working on this! I see the message “Error Loading https://some/ome.zarr/.zattrs: Failed due to CORS issues.” The message also appears even when 404 errors are encountered due to invalid URLs (i.e. https://not/a/path.ome.zarr/.zattrs). Since it may not be clear what is causing the error, may I suggest changing the message to something like: “HTTP error {error_code} loading {url}: Failed due to a Network or CORS error.”

Thanks again! This will be very helpful to others trying to troubleshoot potential network errors due to CORS not being configured server side. CORS problems are also common with neuroglancer which offers similar helpful prompts!

From: Will Moore @.> Sent: Wednesday, February 8, 2023 1:19 PM To: ome/ome-ngff-validator @.> Cc: Watson, Alan M @.>; Mention @.> Subject: Re: [ome/ome-ngff-validator] Try to detect errors due to CORS when fetch fails (PR #25)

Hi @AlanMWatsonhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FAlanMWatson&data=05%7C01%7Calan.watson%40pitt.edu%7Cbbe97c3019374589ea5708db0a010056%7C9ef9f489e0a04eeb87cc3a526112fd0d%7C1%7C0%7C638114771654228268%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=wLaEbH14VKEC1vwqXWx7puqUFTBakSMZjeIL3Roklbc%3D&reserved=0 - could you try the deploy preview above at https://deploy-preview-25--ome-ngff-validator.netlify.app/https://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdeploy-preview-25--ome-ngff-validator.netlify.app%2F&data=05%7C01%7Calan.watson%40pitt.edu%7Cbbe97c3019374589ea5708db0a010056%7C9ef9f489e0a04eeb87cc3a526112fd0d%7C1%7C0%7C638114771654228268%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=fMgZsPtwRALW5xqcEKhSta8JBH5I4oPmSW%2F91Y77PWA%3D&reserved=0 ?

— Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fome%2Fome-ngff-validator%2Fpull%2F25%23issuecomment-1423051362&data=05%7C01%7Calan.watson%40pitt.edu%7Cbbe97c3019374589ea5708db0a010056%7C9ef9f489e0a04eeb87cc3a526112fd0d%7C1%7C0%7C638114771654228268%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=gAKwZ%2FPW9%2FmsZ5oals7pNnN76PJzJcEDKy4SVrP9D6A%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAKLXU4Q6WJ6MV4XZG4ALGT3WWPPSTANCNFSM6AAAAAAUVSXND4&data=05%7C01%7Calan.watson%40pitt.edu%7Cbbe97c3019374589ea5708db0a010056%7C9ef9f489e0a04eeb87cc3a526112fd0d%7C1%7C0%7C638114771654228268%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=%2BP2I3KmQt7QrCn1IfVJFGaq248X%2BdBURNbz817NuSpU%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.**@.>>

[will-moore]

Thanks for the testing. You're right that if you have a CORS error, this might be hiding the fact that the URL is invalid (404). But to say "Failed due to a Network or CORS error" might lead users to assume that the Network is failing when there really is a CORS issue that must be fixed first.

I've tried to see whether I can detect a 404 when there is CORS failure (to try and give the users both pieces of info) - It is possible to see the 404 in the browser dev-tools but I can't access this info from JavaScript.

So I think it's safer to only report the known CORS issue and not confuse the message with other potential issues?

[will-moore]

@joshmoore this has had some testing above... - If you want to try your own CORS testing, I've been using this script to server data with CORS headers, and commenting out the send_header() line to test CORS failures:

#!/usr/bin/env python3

# From https://stackoverflow.com/questions/21956683/enable-access-control-on-simple-http-server

from http.server import HTTPServer, SimpleHTTPRequestHandler, test
import sys

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)

if __name__ == '__main__':
    test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)

Also, I added more examples to the default home page (when no source is chosen) to make it easier to test a few different files and layouts. E.g: see https://deploy-preview-25--ome-ngff-validator.netlify.app/

[joshmoore]

:+1:

For a follow up, as this list gets longer:

it would probably be good to move to a drop-down, and possibly a field where someone can paste a link in rather than editing the URL.

[joshmoore]

Oh, and can there be a button that creates an issue on GitHub if there's a problem? :smile: