You're on the right track!
It looks like you're trying to read an HTML file on your hard drive, and asking that HTML file to read another file, also on your local hard drive? The "direct approach" won't work here, due to a major security feature of your web browser that prevents JS code from reading the local filesystem directly. (imagine if an ad could run code to steal your private files: very bad!)
There is a way to make this work for local development, which involves running a local server from the folder containing your files (and using relative paths, like `webroot/tabix/myfile.gz`). See this article for helpful tips about an example server that most bioinformatics people probably already have installed:
Once you deploy to production, this isn't a problem- you're always running a web server anyway**. But it does cause confusion when testing locally!
** If you are running your web server on one host, but your static files on a different provider like Amazon
S3 or Google Cloud Storage, note that you may need to
configure some additional request headers
before Tabix will work properly (due to CORS). If the web page and the tabix files are on the same host (like
https://snipa.org/), then you likely won't encounter this problem. Core message: browsers have lots of gnarly security rules, and when in doubt, check the JS devtools console for error messages!