Faça Axios enviar cookies em suas solicitações automaticamente

Estou enviando solicitações do cliente para meu servidor Express.js usando Axios.

Eu defini um cookie no cliente e quero ler esse cookie de todas as solicitações do Axios sem adicioná-las manualmente para solicitar manualmente.

Este é o meu exemplo de solicitação do cliente:

axios.get(`some api url`).then(response => ...

Tentei acessar cabeçalhos ou cookies usando estas propriedades em meu servidor Express.js:

req.headers
req.cookies

Nenhum deles continha cookies. Estou usando o middleware de analisador de cookies:

app.use(cookieParser())

Como faço para que o Axios envie cookies nas solicitações automaticamente?

Editar:

Eu defino o cookie no cliente assim:

import cookieClient from 'react-cookie'

...
let cookie = cookieClient.load('cookie-name')
if(cookie === undefined){
      axios.get('path/to/my/cookie/api').then(response => {
        if(response.status == 200){
          cookieClient.save('cookie-name', response.data, {path:'/'})
        }
      })
    }
...

Embora também esteja usando Axios, não é relevante para a questão. Eu simplesmente quero incorporar cookies em todas as minhas solicitações assim que um cookie for definido.

Eu tive o mesmo problema e resolvi usando o withCredentialsimóvel.

XMLHttpRequest de um domínio diferente não pode definir valores de cookie para seu próprio domínio, a menos que withCredentials seja definido como true antes de fazer a solicitação.

axios.get('some api url', {withCredentials: true});

TL; DR:

{ withCredentials: true } ou axios.defaults.withCredentials = true

Da documentação dos axios

withCredentials: false, // default

withCredentials indica se as solicitações de controle de acesso entre sites devem ou não ser feitas usando credenciais

Se você passar { withCredentials: true }com seu pedido, deve funcionar.

Uma maneira melhor seria definir withCredentialscomo trueemaxios.defaults

axios.defaults.withCredentials = true

Não estou familiarizado com o Axios, mas pelo que sei em javascript e ajax existe uma opção

withCredentials: true

Isso enviará automaticamente o cookie para o lado do cliente. Por exemplo, este cenário também é gerado com passportjs, que define um cookie no servidor

Também é importante definir os cabeçalhos necessários na resposta expressa. Estes são os que funcionaram para mim:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', yourExactHostname);
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

Outra solução é usar esta biblioteca:

https://github.com/3846masa/axios-cookiejar-support

que integra o suporte "Tough Cookie" ao Axios. Observe que essa abordagem ainda requer o withCredentialssinalizador.

para as pessoas que ainda não conseguiram resolver, essa resposta me ajudou. resposta stackoverflow: 34558264

TLDR; é necessário definir {withCredentials: true}tanto na solicitação GET quanto na solicitação POST (obtendo o cookie) para ambos os axios, bem como buscar.

Como faço para que o Axios envie cookies nas solicitações automaticamente?

conjunto axios.defaults.withCredentials = true;

ou para algum pedido específico que você pode usar axios.get(url,{withCredentials:true})

isso gerará um erro CORS se 'Access-Control-Allow-Origin' estiver definido como curinga (*). Portanto, certifique-se de especificar o url de origem de sua solicitação

por exemplo: se o seu front-end que faz a solicitação for executado em localhost: 3000, defina o cabeçalho de resposta como

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

também definido

res.setHeader('Access-Control-Allow-Credentials',true);

Você pode usar withCredentialspropriedade para passar cookies na solicitação.

axios.get(`api_url`, { withCredentials: true })

Ao definir, { withCredentials: true }você pode encontrar problemas de origem cruzada. Para resolver isso, você precisa usar

expressApp.use(cors({ credentials: true, origin: "http://localhost:8080" }));

Aqui você pode ler sobre withCredentials

Você está misturando os dois pensamentos.

Você tem "react-cookie" e "axios"

react-cookie => é para lidar com o cookie no lado do cliente

axios => é para enviar solicitações ajax para o servidor

Com essas informações, se você quiser que os cookies do lado do cliente sejam comunicados também no lado do back-end, você precisará conectá-los.

Nota do Leiame "react-cookie":

Cookies isomórficos!

Para poder acessar os cookies do usuário durante a renderização do servidor, você pode usar plugToRequest ou setRawCookie.

link para ler-me

Se é isso que você precisa, ótimo.

Se não, por favor, comente para que eu possa elaborar mais.

Eu tive exatamente o mesmo problema e perdi cerca de 6 horas da minha vida procurando,

withCredentials: true

Mas o navegador ainda não salvou o cookie até que, por algum motivo estranho, tive a ideia de embaralhar a definição de configuração:

Axios.post(GlobalVariables.API_URL + 'api/login', {
        email,
        password,
        honeyPot
    }, {
        withCredentials: true,
        headers: {'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json'
    }});

Parece que você deve sempre enviar a chave 'withCredentials' primeiro.