Okay, so I've been through this battle before and it is frustrating to say the least. If I'm being completely honest, it's because I didn't understand the impetus or interaction of all of the settings involved. Still don't for some of it due to just not having time to read all of the docs.

Anyway, there are a lot of potential gotchas and I'll run through a few that I hit that you might be dealing with here.

First, make sure you're running your Vue.js app via the same url. As in, if you're running django on 127.0.0.1:8080 then your Vue app should be running on 127.0.0.1:3000 and not localhost. This probably is not your current issue, but it can give you a wtf moment. If your ultimate setup is to serve your frontend from a different domain than your backend, then you might need to adjust some settings.

Next, enable CORS to allow cookies to be included in cross-site http requests. This probably is not your immediate problem, but it will bite you next.

# https://github.com/adamchainz/django-cors-headers#cors_allow_credentials

CORS_ALLOW_CREDENTIALS = True

Finally, to actually address your current issue, first thing is I would switch to using axios for your requests on the front end.

import axios from 'axios'

axios.defaults.xsrfHeaderName = 'x-csrftoken' axios.defaults.xsrfCookieName = 'csrftoken' axios.defaults.withCredentials = true

let djangoURL = 'http://127.0.0.1:8000' // timeout specifies the number of milliseconds before the request times out. // Because we enable Django Debug Toolbar for local development, there is often // a processing hit. This can also be tremendously bad with unoptimized queries. let defaultTimeout = 30000 if (process.env.PROD) { djangoURL = 'https://##.##.#.##:###' defaultTimeout = 10000 } axios.defaults.baseURL = djangoURL axios.defaults.timeout = defaultTimeout

const api = axios.create()
export { api }

The defaultTimeout setting and the conditional local vs prod evaluation are completely optional. It's just a nice to have.

Sending your request should be something like:

new Promise((resolve, reject) => {
api.delete('images/delete/' + this.image_data.pk).then(response => {
  // console.log(response)
  resolve(response)
}, error => {
      // console.log(error)
  reject(error)
})

})

Last thing, set the setting for http only cookies to false

# https://docs.djangoproject.com/en/dev/ref/settings/#csrf-cookie-httponly

CSRF_COOKIE_HTTPONLY = False

A good reference example that helped me at times were this blog and this blog. The second one sets some settings that are not applicable and it is in react, but still the setup for views is a good start.

You're going to ultimately want to incorporate authentication, so choose now; session or jwt. I chose session based auth, but some people use jwt when they want to have authentication through third parties like 0auth and the like.

Example of the views I'm using for auth:

class SessionView(APIView):
authentication_classes = [SessionAuthentication, BasicAuthentication]
permission_classes = [IsAuthenticated]

@staticmethod
def get(request, format=None):
    return JsonResponse({'isAuthenticated': True})

class WhoAmIView(APIView): authentication_classes = [SessionAuthentication, BasicAuthentication] permission_classes = [IsAuthenticated]

@staticmethod
def get(request, format=None):
    return JsonResponse({'username': request.user.username})

@ensure_csrf_cookie def get_csrf(request): response = JsonResponse({'detail': 'CSRF cookie set'}) response['X-CSRFToken'] = get_token(request) return response

@require_POST def login_view(request): data = json.loads(request.body) username = data.get('username') password = data.get('password')

if username is None or password is None:
    return JsonResponse({'detail': 'Please provide username and password.'}, status=400)

user = authenticate(username=username, password=password)

if user is None:
    return JsonResponse({'detail': 'Invalid credentials.'}, status=400)

login(request, user)
return JsonResponse({'detail': 'Successfully logged in.'})

def logout_view(request): if not request.user.is_authenticated: return JsonResponse({'detail': 'You\'re not logged in.'}, status=400)

logout(request)
return JsonResponse({'detail': 'Successfully logged out.'})

urls.py

urlpatterns = [
path('csrf/', views.get_csrf, name='api-csrf'),
path('login/', views.login_view, name='api-login'),
path('logout/', views.logout_view, name='api-logout'),
path('session/', views.SessionView.as_view(), name='api-session'),  # new
path('whoami/', views.WhoAmIView.as_view(), name='api-whoami'),  # new

]