[API-Spotify]GitHub.IO Client-Side XMLHttpRequest - track request - blocked by CORS

[CeroBits]

https://stackoverflow.com/questions/55895445/api-spotifyclient-side-xmlhttprequest-track-request-blocked-by-cors

Issue found on May 28th 2019.

Endpoint(s):

• GET /v1/search

Scope(s):

• Authenticated (application already fulfilled auth)

Steps to reproduce:

1. GET XMLHttpRequest of endpoint
2. pass parameters

try{ var urlParams = new URLSearchParams(window.location.search); var authorizationBasic = urlParams.get('code'); var uri = "https://api.spotify.com/v1/search?q="; var str = "bach"; var searchParam = encodeURIComponent(str); var request = new XMLHttpRequest(); request.open('GET', uri+searchParam, true); request.withCredentials = true;
request.setRequestHeader('type', 'track'); request.setRequestHeader('Authorization', 'Bearer' + authorizationBasic); request.send(); request.onreadystatechange = function () { if (request.readyState === 4) { alert(request.responseText); } }; } catch(error){
alert(error.message); }

Expected behaviour:

JSON response of result.

Actual behaviour:

Access to XMLHttpRequest at 'https://api.spotify.com/v1/artists/43ZHCT0cAZBISjO8DG9PnE/related-artists' from origin 'https:/gitHubName.github.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. (consistently)

[jscholes]

First, please fix your code to make sure you're sending a valid request.

• You're sending the search type as a request header (type: track) rather than a query parameter in the URL (type=track).
• There is no space between the word "Bearer" and the contents of the authorizationBasic variable, so this header is invalid.
• Does the authorizationBasic variable definitely contain a Spotify access token? I ask because the name doesn't clearly communicate its contents. As an aside, asking your users to give you an access token as a URL parameter means that GitHub (or whichever web host) will store it in their logs.

Once you've fixed these, let us know if you're still seeing the same behaviour.

[CeroBits]

Jscholes thank you very much for that quick response, i didnt realize you already answered this, i've already fixed those issues, my code is now running but sadly its responding with status of 0

about this point

As an aside, asking your users to give you an access token as a URL parameter means that GitHub (or whichever web host) will store it in their logs.

what would you recommend me to mask the token, my issue is that Github is a static page so my options are limited

this is the fixed code

try{ var urlParams = new URLSearchParams(window.location.search); var authorizationBasic = urlParams.get('code'); var uri = "https://api.spotify.com/v1/search?q="; var str = "bach"; var searchParam = encodeURIComponent(str); var request = new XMLHttpRequest(); request.open('GET', uri+searchParam+"&type=track", true); request.withCredentials = true; request.setRequestHeader('Authorization', 'Bearer '+authorizationBasic); request.send(); request.onreadystatechange = function () { if (this.readyState === 4) { if (this.status === 200) { //DoSomething } } }; } catch(error){ alert(error.message); }

thanks!