web-dev-qa-db-ja.com

Axiosにリクエストにクッキーを自動的に送信させる

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

私はクライアントにクッキーを設定し、手動でリクエストにそれらを手動で追加せずにすべてのAxiosリクエストからそのクッキーを読みたいです。

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

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

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

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

javascriptnode.jsexpresscookiesaxios
74
Kunok

私は同じ問題を抱えており、 withCredential プロパティによってそれを修正しました。

別のドメインからのXMLHttpRequestは、要求を行う前にwithCredentialsがtrueに設定されていない限り、自分のドメインのcookie値を設定できません。

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

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

withCredentials: true

これは自動的にクッキーをクライアントサイドに送信します。例として、このシナリオはpassportjsでも生成されます。これは、サーバー上にCookieを設定します。

9
RITESH ARORA

エクスプレスレスポンスに必要なヘッダを設定することも重要です。これらは私のために働いたものです：

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

Axiosドキュメンテーションから

withCredentials：false、//デフォルト

withCredentialsは、資格情報を使用してクロスサイトアクセス制御要求を行うべきかどうかを示します

あなたの要求で{ withCredentials: true }を渡してもうまくいくはずです。

もっと良い方法は、axios.defaultsのwithCredentialsをtrueに設定することです。

axios.defaults.withCredentials = true

4
Fatih

別の解決策はこのライブラリを使うことです：

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

これは "Tough Cookie"サポートをAxiosに統合します。この方法でもwithCredentialsフラグが必要です。

4
machineghost

あなたは2つの考えを混在させています。

あなたは "react-cookie"と "axios"を持っています

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

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

その情報で、もしクライアント側からのクッキーもバックエンド側で伝達されることを望むなら、あなたはそれらを一緒に接続する必要があるでしょう。

"react-cookie" Readmeからのメモ：

同形クッキー

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

readmeへのリンク

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

そうでなかったら、私がもっと詳しく述べることができるようにコメントしてください。

1
Tzook Bar Noy

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);
0
prak

まだ解決することができない人々のために、この答えは私を助けました。 stackoverflow回答：34558264

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

0
the_dangoria