Axios가 요청에서 자동으로 쿠키를 보내도록합니다.

Axios를 사용하여 클라이언트에서 Express.js 서버로 요청을 보내고 있습니다.

클라이언트에 쿠키를 설정하고 수동으로 요청하기 위해 수동으로 추가하지 않고 모든 Axios 요청에서 해당 쿠키를 읽고 싶습니다.

이것은 내 클라이언트 측 요청 예입니다.

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

Express.js 서버에서 다음 속성을 사용하여 헤더 또는 쿠키에 액세스하려고했습니다.

req.headers
req.cookies

둘 다 쿠키를 포함하지 않았습니다. 쿠키 파서 미들웨어를 사용하고 있습니다.

app.use(cookieParser())

Axios가 요청에서 쿠키를 자동으로 보내도록하려면 어떻게해야합니까?

편집하다:

다음과 같이 클라이언트에 쿠키를 설정합니다.

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:'/'})
        }
      })
    }
...

Axios도 사용하지만 질문과 관련이 없습니다. 쿠키가 설정되면 모든 요청에 ​​쿠키를 삽입하고 싶습니다.

나는 같은 문제가 있었고 withCredentials속성 을 사용하여 수정했습니다 .

다른 도메인의 XMLHttpRequest는 요청하기 전에 withCredentials를 true로 설정하지 않는 한 자체 도메인에 대한 쿠키 값을 설정할 수 없습니다.

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

TL; DR :

{ withCredentials: true } 또는 axios.defaults.withCredentials = true

axios 문서에서

withCredentials: false, // default

withCredentials 자격 증명을 사용하여 교차 사이트 액세스 제어 요청을 만들어야하는지 여부를 나타냅니다.

{ withCredentials: true }요청과 함께 전달 하면 작동합니다.

더 나은 방법은 다음 withCredentials과 같이 설정 하는 것 true입니다.axios.defaults

axios.defaults.withCredentials = true

Axios에 익숙하지 않지만 javascript와 ajax에서 아는 한 옵션이 있습니다.

withCredentials: true

그러면 자동으로 쿠키가 클라이언트 측에 전송됩니다. 예를 들어,이 시나리오는 서버에 쿠키를 설정하는 passportjs로도 생성됩니다.

빠른 응답에서 필요한 헤더를 설정하는 것도 중요합니다. 다음은 나를 위해 일한 것입니다.

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();
});

또 다른 해결책은이 라이브러리를 사용하는 것입니다.

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

Axios에 "Tough Cookie"지원을 통합합니다. 이 방법에는 여전히 withCredentials플래그 가 필요합니다 .

여전히 문제를 해결할 수없는 사람들에게이 답변이 도움이되었습니다. stackoverflow 답변 : 34558264

TLDR; {withCredentials: true}axios 및 fetch 모두에 대해 GET 요청과 POST 요청 (쿠키 가져 오기)을 모두 설정해야합니다 .

Axios가 요청에서 쿠키를 자동으로 보내도록하려면 어떻게해야합니까?

세트 axios.defaults.withCredentials = true;

또는 특정 요청에 대해 사용할 수 있습니다. axios.get(url,{withCredentials:true})

'Access-Control-Allow-Origin'이 와일드 카드 (*)로 설정된 경우 CORS 오류가 발생합니다. 따라서 요청의 출처 URL을 지정하십시오.

예를 들어 : 요청을 만드는 프런트 엔드가 localhost : 3000에서 실행되는 경우 응답 헤더를 다음과 같이 설정하십시오.

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

또한 설정

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

withCredentials속성을 사용 하여 요청에서 쿠키를 전달할 수 있습니다 .

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

설정 { withCredentials: true }하면 교차 출처 문제가 발생할 수 있습니다. 당신이 사용해야하는 것을 해결하려면

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

여기에서 withCredentials 에 대해 읽을 수 있습니다.

두 가지 생각이 섞여 있습니다.

"반응 쿠키"와 "축"이 있습니다.

react-cookie =>는 클라이언트 측에서 쿠키를 처리하기위한 것입니다.

axios => 서버에 ajax 요청을 보내기위한 것입니다.

이 정보를 사용하여 클라이언트 측의 쿠키를 백엔드 측에서도 전달하려면 쿠키를 함께 연결해야합니다.

"react-cookie"Readme의 참고 사항 :

동형 쿠키!

서버 렌더링을 수행하는 동안 사용자 쿠키에 액세스하려면 plugToRequest 또는 setRawCookie를 사용할 수 있습니다.

readme 링크

이것이 필요한 것이라면 좋습니다.

그렇지 않다면 더 자세히 설명 할 수 있도록 댓글을 달아주세요.

그래서 똑같은 문제가 발생했고 검색하는 데 약 6 시간이 걸렸습니다.

withCredentials: true

그러나 브라우저는 이상한 이유로 구성 설정을 셔플 할 때까지 쿠키를 저장하지 않았습니다.

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

항상 'withCredentials'키를 먼저 보내야하는 것 같습니다.