angularexpressspotify

Access to fetch at Spotify API redirected from backend from origin (angular clientside) has been blocked by CORS policy


Front-End: Angular Back-End: Express.js

I am relatively new to backend development and I am trying to learn how to work with Express.js. In an attempt to develop an app utilizing Spotify's Web Api I have run into a snag.

I am trying to make a request from my frontend to my backend api. The backend then makes a request to spotify's api for an access token. Part of the flow of obtaining an access token from spotify is to be redirected to spotify so that the user can allow the access. Once the backend responds with the redirection I get the below error related to CORS.

Access to fetch at 'https://accounts.spotify.com/authorize?client_id=clientId&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauthorization%2Fget-spotify-token&response_type=code&scope=user-read-private+user-read-email&state=state' (redirected from 'http://localhost:3000/authorization') from origin 'http://localhost:4200' has been blocked by CORS policy: 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.

I'm not sure where to go from here. I've tried various web searches with no success. Any advice would be great. When making requests from the browser everything works fine. But when making the same request through my angular application I run into the issue.


Solution

  • The following link ( authentication flow must happen in a visible browsing context,) resolved my issue. Although I'd prefer to run everything through my angular front-end when communicating with the backend, the link explains that spotify's web api might not allow it.