I am currently working on setting up an authentication flow using the Spotify API. In this setup, my Angular application is making calls to my Node server which is running on localhost:3000.
export class SpotifyService {
private apiRoot = 'http://localhost:3000/login';
constructor(private http: HttpClient) {}
login() {
console.log('login');
this.http.get(this.apiRoot).subscribe((data) => {});
}
}
The Angular app is hosted on localhost:4000
const express = require('express');
const app = express();
const port = 3000;
const SpotifyWebApi = require('spotify-web-api-node');
const cors = require('cors');
const corsOptions = {
origin: '*',
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors(corsOptions));
const spotifyApi = new SpotifyWebApi({
clientId: '...',
clientSecret: '...',
redirectUri: 'http://localhost:3000/callback',
});
app.get('/', (req, res) => {
res.send('Hello World from Node.js server!');
});
app.get('/login', (req, res) => {
const authorizeUrl = spotifyApi.createAuthorizeURL([
'user-read-email',
'user-read-private',
], 'state');
res.redirect(authorizeUrl);
});
// Callback route
app.get('/callback', async (req, res) => {
const { code } = req.query;
console.log('code: ', code);
try {
const tokens = await spotifyApi.authorizationCodeGrant(code);
spotifyApi.setAccessToken(tokens.body.access_token);
spotifyApi.setRefreshToken(tokens.body.refresh_token);
console.log(tokens.body.access_token);
// The user is now logged in
res.redirect('/landing');
} catch (error) {
res.status(500).send(error.message);
}
});
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
While trying to call the Node server from my Angular application, I encountered the following error:
localhost/:1 Access to XMLHttpRequest at 'https://accounts.spotify.com/authorize?client_id=...&response_type=code&redirect_uri=http://localhost:3000/callback&scope=user-read-email%20user-read-private&state=state' (redirected from 'http://localhost:3000/login') from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
On the Spotify dashboard, my website is registered with localhost:4000 for the Angular app and localhost:3000/callback for the Node server.
I initially thought that the cors() function would handle this issue but seems like there are still CORS restrictions.