Home » Java » Java and Angular Spotify API Cors-Exceptionshub

Java and Angular Spotify API Cors-Exceptionshub

Posted by: admin February 25, 2020 Leave a comment

Questions:

I’m trying to authorize spotify API using spring + angular.

Server side: RestController which sends authorization data to spotify API and performs redirect.
Client side: Angular, 1 button that sends request to this restController.

Server side:

@RestController
public class SpotifyAuthRest {
    @GetMapping("/auth")
    public ResponseEntity spotifyAuth() {
        HttpHeaders headers = new HttpHeaders();
        headers.setLocation(URI.create("https://accounts.spotify.com/authorize?response_type=code&client_id=xxx&redirect_uri=http://localhost:8080/"));
        ResponseEntity redirect = new ResponseEntity<>(headers, HttpStatus.TEMPORARY_REDIRECT);
        return redirect;
    }
}

Client side:

<button (click)="authorize()">Authorize</button>

authorize() {
    this.http.get("/auth").subscribe((data) => {
    }, (error) => {

    })
}

If I simple go to http://localhost:8080/auth, everything works and I’m redirected to spotify login page. However if I press authorize button, which calls http://localhost:8080/auth, I get CORS errors.

Access to XMLHttpRequest at 'https://accounts.spotify.com/authorize?response_type=code&client_id=xxx&redirect_uri=http://localhost:8080/' (redirected from 'http://localhost:8080/auth') from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What am I missing here?

UNRELATED NOTE

Since I’ve already posted: spotify documentation says to hide your clientId, and use server side to send it, which makes sense. But when redirect to https://accounts.spotify.com/ is performed after authorization, clientId is visible in the url, so where is the security?

EDIT

If using a simple hyper link, say <a href="/auth">Authorize</a> in angular, instead of button/observables, everything works.

How to&Answers: