Envio de csrftoken requisição do tipo post, frontend com Vue.js

Estou desenvolvendo uma aplicação com Django Rest no backend e Vuejs no frontend, usando o axios, as requisições do tipo get funcionando de boa, porém as do tipo post falham gerando Forbidden. Destalhe que estou enviando o cabeçalho com csrftoken e possui sessionid também. No swagger todas funcionam, deve ser algo de errado que estou fazendo, mas não consigo encontrar o que pode estar causando a falha.

— Google translated text —

Por favor, descreva como você está executando o Django para isso. Isso está acontecendo em um ambiente de desenvolvimento ou em uma implantação de produção?

Qual é a resposta de erro completa e a mensagem que você está recebendo?

Usando as ferramentas de desenvolvedor do seu navegador, como é sua solicitação POST?

Quais são as configurações relacionadas ao CSRF no seu arquivo de configurações do Django? Essas seriam todas as configurações começando com CSRF_ (se você estiver carregando qualquer uma delas do ambiente ou de um arquivo externo, mostre quais são as configurações finais após tudo ter sido aplicado.)

Há algum problema de origem cruzada envolvido aqui? (Você está carregando o front-end de um domínio diferente do que está acessando?)

Você está usando algum pacote de terceiros que possa estar afetando a proteção CSRF?

— Original English text —

Please describe how you’re running Django for this. Is this happening in a development environment or a production deployment?

What is the complete error response and message you are receiving?

Using your browser’s developer tools, what does your POST request look like?

What are the CSRF related settings in your Django settings file? These would be all settings starting with CSRF_ (If you’re loading any of these from the environment or from an external file, please show what the final settings are after everything has been applied.)

Are there any cross-origins issues involved here? (Are you loading the front-end from a different domain than you are accessing?)

Are you using any third-party packages that might be affecting CSRF protection?

Está em ambiente de desenvolvimento,
Mensagem de erro 403 Forbidden
Mensagem de erro axios CSRF Failed: CSRF token missing,

Metodo que realiza o post
async sendRequest() {
try {
const token = document.cookie;
await api.post(
http://localhost:8000/api/v1/solicitacao/,
{
data_inicio: this.data_inicial_1,
data_fim: this.data_final_1,
},
{
headers: {“X-CSRFToken”: token},
}
);
} catch (error) {
console.error(“error”, error);
}
},
Quanto a origem cruzada o django já está configurado para isso

Arquivo settings.py esta dessa maneira

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

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOWED_ORIGINS = [
http://localhost:8080’, # ou qualquer outro endereço do seu frontend
]

CSRF_TRUSTED_ORIGINS = [
http://localhost:8080’, # ou qualquer outro endereço do seu frontend
]

CORS_ALLOW_METHODS = [
“DELETE”,
“GET”,
“OPTIONS”,
“PATCH”,
“POST”,
“PUT”,
]

CORS_ALLOW_HEADERS = [
“accept”,
“accept-encoding”,
“authorization”,
“content-type”,
“dnt”,
“origin”,
“user-agent”,
“x-csrftoken”,
“x-requested-with”,
]
REST_FRAMEWORK = {
# ‘DEFAULT_PAGINATION_CLASS’: ‘rest_framework.pagination.LimitOffsetPagination’,
‘DEFAULT_AUTHENTICATION_CLASSES’: [
‘rest_framework.authentication.BasicAuthentication’,
‘rest_framework.authentication.SessionAuthentication’
]
}

— Google translated text —

Acredito que o problema esteja nessa linha:
const token = document.cookie;

Se você verificar as ferramentas de desenvolvedor do seu navegador, verá que token provavelmente está definido como 'csrftoken=cUPWvxmXGRw0M7sw2XBvLOqSDW6dxsCK', que é o que você está enviando em sua solicitação de postagem.
No entanto, neste caso, o que você deve definir no cabeçalho é apenas a parte após o sinal = (cUPWvxmXGRw0M7sw2XBvLOqSDW6dxsCK)

Você também tem o problema potencial de que, se acabar usando vários cookies, não está separando esse cookie específico do restante dos cookies que podem ser incluídos.

— Original English text ----

I believe the issue is with this line:
const token = document.cookie;

If you check your browser’s developer tools, you’ll see that token is probably set to something like 'csrftoken=cUPWvxmXGRw0M7sw2XBvLOqSDW6dxsCK', which is then what you are sending within your post request.
However, in this case, what you should be setting the header to is just the part after the = sign (cUPWvxmXGRw0M7sw2XBvLOqSDW6dxsCK)

You also have the potential problem that if you end up using multiple cookies, you’re not separating this specific cookie from the rest of the cookies that may be included.

Sim percebi isso, em outras tentativas retirei o csrftoken= e nada mudou.
Na verdade eu consegui passar daquela etapa, descobri que no settings.py é preciso definir o
CORS_ALLOW_HEADERS passando o “X-CSRFToken”. Então me parece que o ero agora é outro. Pelo o que entendi o problema agora esta na forma como o campo intervalos é passado : que é uma string mas porém tem outros campos dentro, como por exemplo data_inicial_1 , data_final_1