django-cors-headers with spotify not working

Question

I am using the spotify API/spotipy with django and need users to log into their accounts in order to access their data. I have used "pip3 install django-cors-headers" and added the appropriate sections to settings.py.

#settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'jazz_stuff.apps.JazzStuffConfig',
'corsheaders',
]

MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True

CSRF_TRUSTED_ORIGINS = (
    'localhost:8000',
)

#views.py
def callSpotify(request):
if request.method == 'POST':
    if request.is_ajax():
        sp_oauth = oauth2.SpotifyOAuth( SPOTIPY_CLIENT_ID, SPOTIPY_CLIENT_SECRET,SPOTIPY_REDIRECT_URI, scope=SCOPE,cache_path=CACHE)
        url = sp_oauth.get_authorize_url()
        return HttpResponseRedirect(url)
return None

Even with this, I still get the error about missing the access-control-allow-origin header, and the spotify login page does not open up.

jquery.min.js:2 XHR finished loading: GET "http://localhost:8000/callSpotify/".

(index):1 Failed to load https://accounts.spotify.com/authorize?client_id=14c8a7dfd5804fb5994243e69bb7606f&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fcallback%2F&scope=user-modify-playback-state+user-top-read&show_dialog=True: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

XHR finished loading: OPTIONS "https://accounts.spotify.com/authorize?client_id=14c8a7dfd5804fb5994243e69bb7606f&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fcallback%2F&scope=user-modify-playback-state+user-top-read&show_dialog=True".

How should I proceed so that I do not get cors errors?

EDIT: added headers

General

Request URL: https://accounts.spotify.com/authorize?client_id=14c8a7dfd5804fb5994243e69bb7606f&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fcallback%2F&scope=user-modify-playback-state+user-top-read&show_dialog=True
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: 104.154.127.47:443
Referrer Policy: no-referrer-when-downgrade

Response Headers

Cache-Control: no-cache, no-store, must-revalidate
Connection: keep-alive
Date: Wed, 14 Mar 2018 06:31:56 GMT
Keep-Alive: timeout=600
Pragma: no-cache
Server: nginx
Strict-Transport-Security: max-age=31536000
X-Content-Type-Options: nosniff
X-UA-Compatible: IE=edge

Request

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,fr;q=0.8
Access-Control-Request-Headers: x-csrftoken,x-requested-with
Access-Control-Request-Method: GET
Connection: keep-alive
Host: accounts.spotify.com
Origin: http://localhost:8000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) 
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36

It looks like you're using an authorization code flow in which case github.com/spotify/web-api/issues/616 may apply to your situation. Good luck, hope this helps. — DragonBobZ
Can you PLEASE include a full set of request AND response headers that you're seeing, for both the preflight OPTIONS request (if any) and also the GET/POST request that you're trying to make. — roryhewitt

Shihabudheen K M Shihabudheen K M · Accepted Answer · 2018-03-13T04:30:47

try to add these lines to your settings.py

# Corsheaders settings
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    '*'
)

Try This....

django-cors-headers with spotify not working

1 Answers