8
respostas

Falha ao obter Cookie do ResponseHeaders.

Estou tentando fazer a integração do Angular com um backend em Django. Para fazer o login, preciso obter um csrftoken, para então fazer um post com os dados do usuário para autenticar. Fato é que não estou conseguindo pegar o token com o angular

Faço um get na url, para obter o token

constructor(private http: HttpClient) {
    this.http
      .get(this.BASE_URL + '/login-app/', { observe: 'response', responseType: 'text', withCredentials: true })
      .subscribe(resp => {
        console.log(resp.headers.get('Set-Cookie'));
      });

  }

O print no console é sempre null.

Mas, no navegador, utilizando a developer-tools do crhome, podemos verificar que o cookie está lá, com a informação que eu preciso:

Response Headers:
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:4200
Access-Control-Expose-Headers:X-CSRFtoken, csrftoken, Set-Cookie
Content-Length:0
Content-Type:text/html; charset=utf-8
Date:Fri, 03 Nov 2017 17:11:17 GMT
Server:WSGIServer/0.2 CPython/3.6.1
Set-Cookie:csrftoken=v38NZ5mupILoIuWYDaxpfcbRuz32vTALREhMvhGyvezgmZ7B8IsulZ2bVVg1zk0O; expires=Fri, 02-Nov-2018 17:11:17 GMT; Max-Age=31449600; Path=/
Vary:Cookie, Origin
X-Frame-Options:SAMEORIGIN

Alguém tem alguma ideia do porquê ou se existe outra maneira de fazer?

8 respostas

Bom dia!

Você não deve ter autorizado a exposição do header. Um aluno passou por algo parecido. Dá uma conferida nesta resposta

https://cursos.alura.com.br/forum/topico-angular-nao-acessa-token-enviado-por-nodejs-30544

Bom dia.

Nas minhas pesquisas cheguei em alguns tópicos que falavam a respeito de exposição de headers. Estou utilizando no lado do django, para resolver o problema de CORS o app : Django-Cors-headers https://github.com/ottoyiu/django-cors-headers

E nas minhas configurações estou utilizando :

CORS_EXPOSE_HEADERS = (
    'X-CSRFtoken',
    'csrftoken',
    'Set-Cookie',
)

Também tentei

CORS_EXPOSE_HEADERS = (
     'Access-Control-Allow-Origin: *'
)

e

CORS_EXPOSE_HEADERS = (
     'Access-Control-Expose-Headers: *'
)

O Angular continua me retornando null.

Olha, se o Angular ainda esta retornando null, é porque o token não foi adicionado ou ele não foi exposto. Nos seus testes, o token aparece, ok, e o header que você configurou parece estar sendo o problema ainda.

Você já tentou https://github.com/crs4/ome_seadragon/wiki/Enable-Django-CORS-(Cross-Origin-Resource-Sharing)-Headers-configuration

Depois de ativar o módulo não esqueça de fazer CORS_ORIGIN_ALLOW_ALL = True.

Veja, essas são todas as minhas configurações do CORS:

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = (
    'localhost:4200',
)

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'csrftoken',
    'set-cookie',
    'x-requested-with',
)

CORS_EXPOSE_HEADERS = (
    'localhost:4200',
)

CSRF_TRUSTED_ORIGINS = (
    'localhost:4200',
)

CORS_ORIGIN_ALLOW_ALL = True

Como podemos ver no ResponseHeaders no chrome o csrftoken está sendo fornecido em "Set-Cookie"

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:4200
Access-Control-Expose-Headers:set-cookie
Content-Length:0
Content-Type:text/html; charset=utf-8
Date:Mon, 06 Nov 2017 12:55:02 GMT
Server:WSGIServer/0.2 CPython/3.6.1
Set-Cookie:csrftoken=v38NZ5mupILoIuWYDaxpfcbRuz32vTALREhMvhGyvezgmZ7B8IsulZ2bVVg1zk0O; expires=Mon, 05-Nov-2018 12:55:02 GMT; Max-Age=31449600; Path=/
Vary:Cookie, Origin
X-Frame-Options:SAMEORIGIN

Se existe algum erro na configuração do Cors, por favor aponte, porque não estou encontrando.

Também acho que o problema não está do lado do Angular, mas como vê, não estou tendo sucesso.

Aparentemente esta tudo OK, assim como você, não enxergo o problema. Inclusive, até outro aluno teve problema e também a solução foi configurar um header no backend:

https://cursos.alura.com.br/forum/topico-angular-nao-acessa-token-enviado-por-nodejs-30544

No caso ele usou Node.js. Você já viu se há bug nessa sua versão do Django? Esta usando qual versão?

Vamos deixar sua pergunta aberta para ver se alguém lança uma luz sobre a questão, porque até onde eu pude enxergar, você fez tudo certo.

Estou utilizando a última versão do django e python Django 1.11.7 e python 3.6.1

Já viu se há algum bug nessas versões?

Não achei nada relacionado a bugs.

Encontrei esse post no stack overflow de um cara que aparentemente tem um problema de headers vazios. https://stackoverflow.com/questions/44096944/enable-cors-in-django-1-11 Mas no post o pessoal está usando sem problemas.

Mas no meu caso, pelo menos pelo dev tools do chrome eu consigo visualizar os headers. Eles estão lá. Só não consigo pegar pelo Angular.

Estou pesquisando para ver se acho alguma coisa, mas até agora nada.