Cors

[josjojo]

When I press 'Load song' nothing happens. In the developer tools console of Firefox I see the error:

Cross-Origin-request blocked With the url: http://0.0.0.0:5001/https://tabs.ultimate-guitar.com/tab/hillsong-united/heart-of-worship-chords-1012850

I have tried to install a CORS enabler add-on, but it did not solve the problem.

[nrsc]

Pleb JS user also having the same troubles.

[hedwiggggg]

Oh, hi, sorry I didn't saw that someone created an issue. Nice github, thanks for notifying.

So the main issue is, that you cannot directly access ultimate-guitar, because their server response doesn't include any relevant Access-Control-* headers. So the browser will block the request.

The solution is to add a no-cors server as a middleman, who proxies the response from ug with the Access-Control-* headers present. The problem is, that I first used an open accessible server for that, but it has been shut down by now.

So I made a Dockerfile with the containing no-cors server. If you can use docker, that would be the easiest way.

If you are unnable to use docker, you should add an .env file to the root of the repository and add the following:

REACT_APP_CORS_HOST={{insert the cors-anywhere server ip / domain}}
REACT_APP_CORS_PORT={{insert the cors-anywhere server port}}
REACT_APP_CORS_PROTOCOL={{insert the cors-anywhere server desired protocol (http/https)}}

So If you setup your own cors-anywhere server https://github.com/Rob--W/cors-anywhere It could be

REACT_APP_CORS_HOST=localhost
REACT_APP_CORS_PORT=8080
REACT_APP_CORS_PROTOCOL=http

Or If you want to use an external service, for example https://cors-anywhere.herokuapp.com/ the .env file would look like this:

REACT_APP_CORS_HOST=cors-anywhere.herokuapp.com
REACT_APP_CORS_PORT=80
REACT_APP_CORS_PROTOCOL=https

The dockerfile uses the script located at: https://github.com/hedwiggggg/ugrip/blob/master/docker/cors-anywhere.js You could just use this with the default parameters.

Edit: https://cors-anywhere.herokuapp.com/ seems to be offline again already, so you should probably setup your own cors-anywhere server.

Just run this node script https://github.com/hedwiggggg/ugrip/blob/master/docker/cors-anywhere.js Add a .env to the project root with this content:

REACT_APP_CORS_HOST=localhost
REACT_APP_CORS_PORT=8080
REACT_APP_CORS_PROTOCOL=http

And build the ui again with yarn build and everything should work as expected.

[hedwiggggg]

When I press 'Load song' nothing happens. In the developer tools console of Firefox I see the error:

Cross-Origin-request blocked With the url: http://0.0.0.0:5001/https://tabs.ultimate-guitar.com/tab/hillsong-united/heart-of-worship-chords-1012850

I have tried to install a CORS enabler add-on, but it did not solve the problem.

So whats basically happening here, the UI tries to access the cors-anywhere server located @ http://localhost:5001 which is not existing.

[hedwiggggg]

Okay, I've pusehd a new version, that should be simpler to use. I added a default .env with https://api.codetabs.com/v1/proxy/?quest= as the cors proxy.

As long as they don't shut down their service it should work out of the box.

I also changed the

REACT_APP_CORS_HOST
REACT_APP_CORS_PORT
REACT_APP_CORS_PROTOCOL

structure to only using REACT_APP_CORS_SERVER

So if they ever shut down their service, just replace the REACT_APP_CORS_SERVER url with a new proxy :)

[hedwiggggg]

FYI: I re-enabled the gh-pages feature. You can now access the app @ https://hedwiggggg.github.io/ugrip/

[nrsc]

Hey thanks for updating the code and adding the access through ghpages. Top notch work hedwiggggg!