1

I'm currently working my way through some tutorials for Angular2. Unfortunately my tutorial doesn't cover that the Spotify API needs an authorization by now. I already set up an application in the Spotify Dev Corner. My code for my Angular2-Service looks like this

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SpotifyService {
    private searchUrl: string;
    private token: string;
    private client_id = 'xxxx';
    private client_secret = 'yyyy';
    private redirect_uri = 'http://localhost:4200';
    private responseType = 'code';

    constructor(private _http:Http){

    }

    authorize(){
        return this._http
            .get('https://accounts.spotify.com/authorize?client_id=' + this.client_id + '&client_secret=' + this.client_secret + '&redirect_uri=' + this.redirect_uri + '&response_type=' + this.responseType)
            .map(res => res.json());
    }    
}

And the constructor in my component looks like this

constructor(private _spotifyService:SpotifyService) {
        this._spotifyService.authorize().subscribe(res => {
            console.log(res);
        });
    }

Now my problem is that when my app runs, I get an error with the cross origins policy that confuses me a little and I'm not really sure where to set the header correctly.

XMLHttpRequest cannot load https://accounts.spotify.com/authorize?client_id=xxxx&client_secret=yyyy&redirect_uri=http://localhost:4200&response_type=code. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

I have added the redirect_uri to my spotify app in their dev corner. Maybe you could help out. Thanks in advance and

Greetings Chris

relief.melone
  • 3,042
  • 1
  • 28
  • 57
  • https://stackoverflow.com/questions/33029349/getting-spotify-api-access-token-with-node-js-express-js/33031590#33031590 and https://stackoverflow.com/questions/24914853/authentication-request-to-spotify-web-api-rejected/24920670#24920670 and https://stackoverflow.com/questions/33188989/allowing-cors-jquery-post-requests-to-spotify-api-on-express-js-server/33198424#33198424 and https://github.com/spotify/web-api-auth-examples are possibly relevant – sideshowbarker Jul 15 '17 at 07:53
  • Ok i made a little progress. It seems like you acutally cannot authorize by the get request but you have to use the url as a link in your component. I get to the spotify page where I am asked to accept the connection between my account and my app. So my only question left is, after i get redireced. how can i access the response data back in my component? After this is solved, I will post the complete code again here as an answer – relief.melone Jul 15 '17 at 08:09
  • @relief.melone Could you update your question with your progress? – aless80 Aug 18 '18 at 22:41

1 Answers1

0

Share headers on HTTP server, like nginx, apache.

You need read about CORS policy.

Need share methods - options, get, post in example

Allen Wahlberg
  • 192
  • 10
  • The thing that confused my was that the cors headers are set at the server, so at spotify and it made no sense for me that an api would block this, but in my comment to the reply I noticed, that you had to use the url as a link and after accepting the connection between your spotify account and the app you get redirected accordingly. the only piece I'm still missing is where to find that token after i get redirected – relief.melone Jul 15 '17 at 08:22
  • What do you want to do? – Allen Wahlberg Jul 15 '17 at 12:40