Spotify Authorization Problems

Slaeh — Fri, 25 Jun 2021 22:53:37 GMT

Plan

Free

Country

United States

Device

(Desktop)

Operating System

(Windows 10)

My Question or Issue

Hello, I'm currently making an app on Desktop (no backend) with React where a user can see their top songs and artists. I'm using the Implicit Grant Flow Authorization model it's not working. I currently have a button that would redirect the user to the Spotify Account page where it would ask them to give my app permission to look at their data but I'm getting:

Access to XMLHttpRequest at 'https://accounts.spotify.com/authorize?client_id=undefined&redirect_uri=http://localhost:3000/callback/&response_type=token' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I looked online for solutions but none seem to work. I tried the anchor tag trick where you make the href the URL but I'm greeted with an invalid client error. The Cors trick would not work because I'm not using a backend. Any help would be greatly appreciated, attached is a picture with my current code (They don't allow other files). Thank you!

-Slaeh

Re: Spotify Authorization Problems

Peter_Schorn — Tue, 29 Jun 2021 23:41:06 GMT

Have you tried setting the "Access-Control-Allow-Origin" header that the error message mentions?

Re: Spotify Authorization Problems

Slaeh — Wed, 30 Jun 2021 03:21:18 GMT

Hi Peter,

Thanks for responding. I actually solved the issue I was having. It turns out my client ID was undefined. I needed to add REACT_APP in front of my credentials in my dot env file and it worked with the anchor tags around the button component. Thanks for the reply once again.

Cheers,
Slaeh

topic Spotify Authorization Problems in Spotify for Developers

Spotify Authorization Problems

Re: Spotify Authorization Problems

Re: Spotify Authorization Problems