[GH-ISSUE #91] issue using AJAX to follow playlist #46

New issue

Closed

opened 2026-02-27 19:25:46 +03:00 by kerem · 1 comment

kerem commented

2026-02-27 19:25:46 +03:00

Owner

Originally created by @Pau1fitz on GitHub (Jun 14, 2017).
Original GitHub issue: https://github.com/jwilsson/spotify-web-api-php/issues/91

I am trying to follow a playlist on spotify using this AJAX. I am implementing this functionality in a wordpress site.

I have the id of the playlist and the playlist owner name in my index.php file. I then send this data to http://www.url/follow-playlist (which is followplaylist.php in wordpress) and store the data as a session variable and do the authentication.

I then use these session values in index.php but I am seeing the following error.

XMLHttpRequest cannot load https://accounts.spotify.com/authorize/?client_id=89f5e5e079204ad*****…playlist-modify-public+playlist-modify-private+playlist-read-collaborative. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.url.com' is therefore not allowed access.

Below is the html in the index.php

The follow-playlist.php file which translates to http://www.url/follow-playlist in wordpress looks as follows:

<?php

require 'vendor/autoload.php';

$session = new SpotifyWebAPI\Session(
    '****',
    '*****',
    'http://www.url'
);

$options = [
    'scope' => [
        'playlist-read-private',
        'user-read-private',
		'playlist-modify-public',
		'playlist-modify-private'
    ],
];

$_SESSION['playlist_owner'] = $_POST['playlist_owner'];
$_SESSION['playlist_id']  = $_POST['playlist_id'];

header('Location: ' . $session->getAuthorizeUrl($options));
die();

?>

My index.php file includes the following code.

The div is just an example of one playlist. The page contains many of these

<div class="follow-playlist" data-playlist-id="1234567" dat-playlist-owner="testuser">
   Follow Playlist
</div>

<div class="follow-playlist" data-playlist-id="87654421" dat-playlist-owner="testuser-two">
   Follow Playlist
</div>

<div class="follow-playlist" data-playlist-id="12312322" dat-playlist-owner="testuser-three">
   Follow Playlist
</div>

<script>
   $(".follow-playlist).click(function(){
      playlist_id = $(this).attr("data-playlist-id");
      playlist_owner = $(this).attr("data-playlist-owner");
   });


   var data = {
      playlist_id: playlist_id
      playlist_owner: playlist_owner
   };

   $.ajax({
        url:"http://www.url/follow-playlist",
        type:"POST",
        data: data,
        success:function(response) {
          console.log(response);
       }
   });

<?php

require 'vendor/autoload.php';

$session = new SpotifyWebAPI\Session('******', '*****', 'http://www.url');
$api = new SpotifyWebAPI\SpotifyWebAPI();

// Request a access token using the code from Spotify
$session->requestAccessToken($_GET['code']);
$accessToken = $session->getAccessToken();

// Set the access token on the API wrapper
$api->setAccessToken($accessToken);

$me = $api->me();
$id = $me->id;

$api->followPlaylist($_SESSION['playlist_id'], $_SESSION['playlist_owner']);

echo 'success';
?>

Is there another way you can think of to enable me to follow a playlist dynamically when a user clicks on a link on the front end, if AJAX is not an option?

Originally created by @Pau1fitz on GitHub (Jun 14, 2017). Original GitHub issue: https://github.com/jwilsson/spotify-web-api-php/issues/91 I am trying to follow a playlist on spotify using this AJAX. I am implementing this functionality in a wordpress site. I have the id of the playlist and the playlist owner name in my `index.php` file. I then send this data to `http://www.url/follow-playlist` (which is `followplaylist.php` in wordpress) and store the data as a session variable and do the authentication. I then use these session values in `index.php` but I am seeing the following error. > XMLHttpRequest cannot load https://accounts.spotify.com/authorize/?client_id=89f5e5e079204ad*****…playlist-modify-public+playlist-modify-private+playlist-read-collaborative. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.url.com' is therefore not allowed access. Below is the html in the `index.php` The `follow-playlist.php` file which translates to `http://www.url/follow-playlist` in wordpress looks as follows: ``` <?php require 'vendor/autoload.php'; $session = new SpotifyWebAPI\Session( '****', '*****', 'http://www.url' ); $options = [ 'scope' => [ 'playlist-read-private', 'user-read-private', 'playlist-modify-public', 'playlist-modify-private' ], ]; $_SESSION['playlist_owner'] = $_POST['playlist_owner']; $_SESSION['playlist_id'] = $_POST['playlist_id']; header('Location: ' . $session->getAuthorizeUrl($options)); die(); ?> ``` My `index.php` file includes the following code. The `div` is just an example of one playlist. The page contains many of these ``` <div class="follow-playlist" data-playlist-id="1234567" dat-playlist-owner="testuser"> Follow Playlist </div> <div class="follow-playlist" data-playlist-id="87654421" dat-playlist-owner="testuser-two"> Follow Playlist </div> <div class="follow-playlist" data-playlist-id="12312322" dat-playlist-owner="testuser-three"> Follow Playlist </div> <script> $(".follow-playlist).click(function(){ playlist_id = $(this).attr("data-playlist-id"); playlist_owner = $(this).attr("data-playlist-owner"); }); var data = { playlist_id: playlist_id playlist_owner: playlist_owner }; $.ajax({ url:"http://www.url/follow-playlist", type:"POST", data: data, success:function(response) { console.log(response); } }); <?php require 'vendor/autoload.php'; $session = new SpotifyWebAPI\Session('******', '*****', 'http://www.url'); $api = new SpotifyWebAPI\SpotifyWebAPI(); // Request a access token using the code from Spotify $session->requestAccessToken($_GET['code']); $accessToken = $session->getAccessToken(); // Set the access token on the API wrapper $api->setAccessToken($accessToken); $me = $api->me(); $id = $me->id; $api->followPlaylist($_SESSION['playlist_id'], $_SESSION['playlist_owner']); echo 'success'; ?> ``` Is there another way you can think of to enable me to follow a playlist dynamically when a user clicks on a link on the front end, if AJAX is not an option?

kerem closed this issue

2026-02-27 19:25:46 +03:00

kerem commented

2026-02-27 19:25:47 +03:00

Author

Owner

@Pau1fitz commented on GitHub (Jun 15, 2017):

I managed to solve this by using cookies. If the user makes a POST request to the follow-playlist endpoint then I store the playlist-owner and playlist-id in cookies. Once the endpoint responds successfully I then navigate to the follow-playlist endpoint and do the authentication as normal. The user is then sent back to the index page once he has authorised the app. Here I request the access token using the code from Spotify. I then use the cookie values to follow the intended playlist.

@Pau1fitz commented on GitHub (Jun 15, 2017): I managed to solve this by using cookies. If the user makes a POST request to the `follow-playlist` endpoint then I store the `playlist-owner` and `playlist-id` in cookies. Once the endpoint responds successfully I then navigate to the `follow-playlist` endpoint and do the authentication as normal. The user is then sent back to the index page once he has authorised the app. Here I request the access token using the code from Spotify. I then use the cookie values to follow the intended playlist.

kerem referenced this issue

2026-02-27 19:26:44 +03:00

[PR #46] [MERGED] Fix: Trying to get property of non-object in Request.php line 163 #233