質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17606questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    2015questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Vue.js

    852questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Cookie

    198questions

    HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

  • axios

    29questions

クロスドメインにてレスポンスで返るSet-Cookieが次回リクエスト時にCookieとしてセットされない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 694

momotaro98

score 3

クライアントにてaxiosを利用しクロスドメインとしてホストと異なるサーバへリクエストのやり取りをしようとしています。

ログインのリクエストにてサーバ側からはSet-Cookieが入ったレスポンスがやってきていることをブラウザで確認しています。

しかし、その後のリクエストにて、ヘッダーにCookieが入りません。

下記のIssueリンクのようにwithCredentials: trueをクライアント側に設定し、res.header("Access-Control-Allow-Credentials", true);の設定をNode.jsのサーバ側でも設定してますが、Cookie付きのリクエストをクロスドメインのサーバ側に送信できない状況です。

https://github.com/axios/axios/issues/876

どのようにすればCookieをサーバ側へ送信できるのかご教授願いたいです。

環境
OS: macOS Sierra 10.12.1
ブラウザ: Chrome バージョン: 67.0.3396.87

ソースコードは下記のようになります。

クライアント側 (localhost:9000)

axios.defaults.withCredentials = true;

axios.post('http://localhost:3000/sessionLogin', {
  idToken: idToken
}).then(function (response) {
  console.log(response)  // Set-Cookieがブラウザで確認できる
  axios.get('http://localhost:3000/profile', { // リクエストにCookieがセットされない
  }).then(function (response) {
    console.log(response)
  }).catch(function (error) {
    console.log(error)
  })
}).catch(function (error) {
    console.log(error)
})

サーバ側 (localhost:3000)

var app = express();
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());
app.use(cookieParser());
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', req.headers['origin']);
  res.header("Access-Control-Allow-Credentials", true);
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.post('/sessionLogin', (req, res) => {
  // Get the ID token passed and the CSRF token.
  const idToken = req.body.idToken.toString();
  // Set session expiration to 5 days.
  const expiresIn = 60 * 60 * 24 * 5 * 1000;
  admin.auth().createSessionCookie(idToken, {expiresIn}).then((sessionCookie) => {
    // Set cookie policy for session cookie.
    const options = {domain: 'localhost', maxAge: expiresIn, httpOnly: true, secure: true};
    res.cookie('session', sessionCookie, options);
    res.end(JSON.stringify({status: 'success'}));
  }, error => {
    res.status(401).send('UNAUTHORIZED REQUEST!');
  });
});

// Whenever a user is accessing restricted content that requires authentication.
app.get('/profile', (req, res) => {
  const sessionCookie = req.cookies.session || '';
  // Verify the session cookie. In this case an additional check is added to detect
  // if the user's Firebase session was revoked, user deleted/disabled, etc.
  if (sessionCookie === '') {
    console.log('No sessionCookie...');
  } else {
    console.log(sessionCookie);
  }
  admin.auth().verifySessionCookie(
    sessionCookie, true /** checkRevoked */).then((decodedClaims) => {
    res.end(JSON.stringify({profile: 'Your profile is here!!!'}));
  }).catch(error => {
  });
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • tanat

    2018/07/01 03:42

    ブラウザ側で実際にセットされたcookieのドメインやパスを確認するとどうなっていますか?

    キャンセル

  • momotaro98

    2018/07/01 11:04

    ドメイン: 空文字、パス: "/" でドメインは空文字になっています。他は、「Name: 値あり、Value: 値あり、Max-Age: 値あり、HTTP、Secure: チェックあり、SameSite: 空文字」です。

    キャンセル

  • momotaro98

    2018/07/01 12:12

    Node.js側でcookieに`domain: 'localhost:3000` を指定し、Cookieのドメインを対応サーバのものにしたのですが、変わらずです。

    キャンセル

  • momotaro98

    2018/07/01 12:14

    domain: 'localhost` とポート指定しない場合も同様でした。

    キャンセル

まだ回答がついていません

同じタグがついた質問を見る

  • JavaScript

    17606questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    2015questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • Vue.js

    852questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Cookie

    198questions

    HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

  • axios

    29questions