AxiosにリクエストでCookieを自動的に送信させる

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

クライアントにcookieを設定し、手動で追加することなく、すべてのAxios要求からそのcookieを読み取ります。

これは私のクライアント側のリクエストの例です：

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

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

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も使用していますが、問題には関係ありません。Cookieが設定されたら、すべてのリクエストにCookieを埋め込みたいだけです。

同じ問題があり、withCredentialsプロパティを使用して修正しました。

別のドメインからのXMLHttpRequestは、リクエストを行う前にwithCredentialsがtrueに設定されていない限り、独自のドメインにCookie値を設定できません。

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

TL; DR：

{ withCredentials: true } または axios.defaults.withCredentials = true

axiosのドキュメントから

withCredentials: false, // default

withCredentials 資格情報を使用してクロスサイトAccess-Control要求を行う必要があるかどうかを示します

あなたが{ withCredentials: true }あなたの要求で合格した場合、それはうまくいくはずです。

より良い方法を設定することになるwithCredentialsようtrueでaxios.defaults

axios.defaults.withCredentials = true

私はAxiosに精通していませんが、javascriptおよびajaxで知る限り、オプションがあります

withCredentials: true

これにより、Cookieが自動的にクライアント側に送信されます。例として、このシナリオは、サーバーにCookieを設定する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

「タフなCookie」サポートをAxiosに統合します。この方法でもwithCredentialsフラグが必要であることに注意してください。

それでも解決できない人のために、この答えは私を助けました。 stackoverflow回答：34558264

TLDR; {withCredentials: true}GETリクエストとPOSTリクエスト（Cookieを取得）の両方でaxiosとフェッチの両方を設定する必要があります。

AxiosにリクエストでCookieを自動的に送信させるにはどうすればよいですか？

セットする axios.defaults.withCredentials = true;

または使用できる特定のリクエスト axios.get(url,{withCredentials:true})

'Access-Control-Allow-Origin'がwildcard（*）に設定されている場合、これによりCORSエラーが発生します。したがって、リクエスト元のURLを必ず指定してください

例：リクエストを行うフロントエンドがlocalhost：3000で実行される場合、応答ヘッダーを次のように設定します

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

またセット

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

withCredentialsプロパティを使用して、リクエストでCookieを渡すことができます。

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

設定{ withCredentials: true }すると、クロスオリジンの問題が発生する可能性があります。それを解決するには、使用する必要があります

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

ここでwithCredentialsについて読むことができます

あなたは二つの考えが混じり合っています。

「react-cookie」と「axios」があります

react-cookie =>はクライアント側でcookieを処理するためのものです

axios =>はajaxリクエストをサーバーに送信するためのものです

その情報を使用して、クライアント側からのCookieがバックエンド側でも通信されるようにするには、それらを一緒に接続する必要があります。

「react-cookie」Readmeからのメモ：

同形のクッキー！

サーバーレンダリングの実行中にユーザーCookieにアクセスできるようにするには、plugToRequestまたはsetRawCookieを使用できます。

Readmeへのリンク

これがあなたが必要とするものなら、素晴らしいです。

そうでない場合は、コメントしてください。詳しく説明します。

だから私はこれとまったく同じ問題を抱えており、私の人生の検索の約6時間を失いました。

withCredentials: true

しかし、なんらかの奇妙な理由で構成設定をシャッフルする考えが出るまで、ブラウザーはまだcookieを保存しませんでした。

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

常に最初に「withCredentials」キーを送信する必要があるようです。