So we’re trying to create an app which pulls user’s Spotify data such as favorite music genres, etc.
We’ve setup an Express server as detailed by this example by Spotify (same code with our own client_id and client_secret): https://github.com/spotify/web-api-examples/tree/master/authorization/authorization_code
This works flawlessly through the browser and when we go to localhost:8888/login, we are able to get my access token and refresh token back.
However, when we tried to go to localhost:8888/login
on the Nextjs app, we get hit with CORS error.
Access to fetch at 'https://accounts.spotify.com/authorize?response_type=code&client_id=3e0d8d7496fb4fbab87b68ec5d108fd7&scope=user-read-private%20user-read-email&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fcallback&state=dc788495f8921db0' (redirected from 'http://localhost:8000/login') from origin 'http://localhost:3000' 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.
Our Nextjs code is simple call to the /login endpoint (like in the Spotify example):
`${APP_URL}/login` ,
);
// const response = await fetch(`${APP_URL}/`)
const data = await response.json();
console.log('data', data);
```
And we've tried connecting to other endpoints like `${APP_URL}/` to make sure there's nothing wrong with Express
The authorization code flow we're trying to implement is this one: [here](https://developer.spotify.com/documentation/web-api/tutorials/code-flow)
We are stuck on step 1.
What are we missing here?
We've tried:
- fetching/request from server:
`const response = await fetch('https://accounts.spotify.com/authorize?response_type=code&client_id=' + client_id + '&scope=' + scope + '&redirect_uri=' + redirect_uri + '&state=' + state)`
but it somehow doesn't go to our redirect_uri, so we couldn't get the refresh/access token