-1

Please bear with me, as I am fairly new to React.

I'm trying to create a React app that uses the Spotify api. I want to use the client credentials authorization flow.

I've set up a basic React app and created a javascript file which exports a function which uses the following and sends a POST request to the spotify token endpoint. 

var authOptions = {
 url: "https://accounts.spotify.com/api/token",
 headers: {
   "Access-Control-Allow-Origin": "*",
   Authorization:
     "Basic " +
     new Buffer(client_id + ":" + client_secret).toString("base64")
 },
 form: {
   grant_type: "client_credentials"
 },
 json: true
};

Once the access token is generated, the function is meant to return it. I call this function inside of a componentDidMount(), but I end up getting this error in the console:

Access to fetch at 'https://accounts.spotify.com/api/token' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Since I have added in 'Access-Control-Allow-Origin' in the headers, should that not have fixed it? And what can I do to fix it?

Note: it's worth mentioning that if I generate an access token through some other method (curl, for instance) and I use that token to do a GET request to spotify API endpoints, that seems to work. It's only with my POST request that I'm having an issue.

Apologies if I'm missing something obvious. I've never had to deal with CORS before.

probot
  • 35
  • 1
  • 5

1 Answers1

0

You can’t set the Access-Control-Allow-* headers as request headers, because they’re response headers, not request headers. What you could do is either use JSONP or set a node-express server and use it as a proxy in order to set the Access-Control-Allow-* headers there or use a cors library (https://medium.com/@alexishevia/using-cors-in-express-cac7e29b005b)

More about CORS errors: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Morgana
  • 337
  • 8
  • 19