1. ホーム
  2. ジャバスクリプト

[解決済み】Axiosがリクエストに含まれるクッキーを自動的に送信するようにする

2022-04-11 15:32:32

質問

Axios を使用して、クライアントから Express.js サーバーにリクエストを送信しています。

私はクライアントにクッキーを設定し、手作業でリクエストに追加することなく、すべてのAxiosリクエストからそのクッキーを読み取りたい。

これは私のクライアントサイドのリクエストの例です。

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

Express.jsサーバーでこれらのプロパティを使用して、ヘッダーやクッキーにアクセスしようとしました。

req.headers
req.cookies

どちらもCookieは含まれていません。クッキー・パーサーのミドルウェアを使用しています。

app.use(cookieParser())

Axiosがリクエストに含まれるクッキーを自動的に送信するにはどうしたらいいですか?

編集してください。

クライアント側でCookieを設定すると、このようになります。

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に設定しない限り、自身のドメインのCookie値を設定することができません。

axios.get(BASE_URL + '/todos', { withCredentials: true });

また、すべてのAxiosリクエストにクレデンシャルを強制することが可能です。

axios.defaults.withCredentials = true

または、以下のコードのようにAxiosのリクエストの一部にクレデンシャルを使用します。

const instance = axios.create({
   withCredentials: true,
   baseURL: BASE_URL
})
instance.get('/todos')