Angular2 Service - Spotify API authorization fails with cors policy

Question

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

stackoverflow.com/questions/33029349/… and stackoverflow.com/questions/24914853/… and stackoverflow.com/questions/33188989/… and github.com/spotify/web-api-auth-examples are possibly relevant — sideshowbarker
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
@relief.melone Could you update your question with your progress? — aless80

Allen Wahlberg Allen Wahlberg · Accepted Answer · 2017-07-15T08:20:05

Share headers on HTTP server, like nginx, apache.

You need read about CORS policy.

Need share methods - options, get, post in example

Angular2 Service - Spotify API authorization fails with cors policy

1 Answers