I have a flask + vue application for which I’m trying to implement JWT tokens. I have my flask app configured to be setting access and refresh tokens in the cookies and on inspection with chrome dev tools, the cookies are being set correctly. However no matter what I try, I’m not able to send my cookies to my backend (I checked the request headers and cookies are not being set in request) and I’m getting the following error:

{
  msg: "Missing cookie "access_token_cookie""
}

This is my axios instance that I’m using in other files to send requests

import axios from 'axios';

const adminService = axios.create({
    baseURL: "http://127.0.0.1:5000/admin",
    withCredentials: true,
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
    },
  });
  
adminService.defaults.withCredentials=true;

export { adminService };

this is the actual request in the admin api file:

export const fetchAllCampaigns = async (status) => {
  try {
    const response = await adminService('/campaigns', 
      { 
        method: 'GET',
        withCredentials: true, 
      }, 
    );
.
.
.

    return campaigns;
  } catch (error) {
    console.error('Failed to fetch campaigns:', error);
    return [];
  }
};

I also have these lines in my flask config:

    app.config["JWT_TOKEN_LOCATION"] = ['cookies']  
    app.config['JWT_COOKIE_CSRF_PROTECT'] = False  

    CORS(app=app, supports_credentials=True)

and this decorator on my flask function:

@admin.route('/campaigns', methods=['GET'])
@jwt_required(locations=['cookies'])

I tried setting credentials true in every possible place in the axios instance and if it is relevant I’m using chrome. I don’t understand what I’m doing wrong here.