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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Cookie

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

セッション

Sessionはクライアントがサーバに送ったすべてのリクエストのことを指します。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

解決済

Express + Nginxでセッションがうまく動作しない

tsuyo_244
tsuyo_244

総合スコア219

Cookie

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

セッション

Sessionはクライアントがサーバに送ったすべてのリクエストのことを指します。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

1回答

0評価

0クリップ

299閲覧

投稿2022/01/20 02:51

質問の概要

Express + nginxを使って開発をしているのですが、ログイン処理時にセッションが意図したように動作してくれません。
ログインAPIへの通信はうまくいっているようでログインしたユーザの情報が返ってきて特にエラーも出ないのですが、その時にブラウザにCookieがセットされていないようです。(レスポンスにSet-Cookieがそもそもない様子)
色々と調べてみたのですが自力での解決が難しそうでご質問させていただきました。どうぞよろしくお願いいたします。

構成など

React / nginx / express / MySQL
フロント側(React)とAPIは別のオリジン
JWTではなくCookieを使ったサーバ側でのセッション管理
expressではexpress-session、ログインの認証にpassport.jsを使用

状況

  • CORSの設定は対応済、フロント側からfetchでログインのAPIに接続し結果も問題なく受け取れる
  • Cookieはhttp-only, secure, Same-site=Noneとなるように設定、フロントおよびAPIはどちらもSSLを設定している
  • Chromeの開発者ツールでログインのAPIをPOSTした時のレスポンスを確認するとヘッダにSet-Cookieが見当たらない

試してみたこと

  • こちらの記事に書かれているような事象に近いのかなと思いapp.set("trust proxy", 1);を設定してみましたが動作は変わらずでした。

https://t-cr.jp/memo/1c317a5b828d92220

  • nginx側でX-Forwarded-Forの設定が必要なのかと思いproxy_set_header X-Forwarded-For $remote_addr;と追記してみましたがこちらも動作変わらずでした。他にも必要な記述があるのかなとおもったのですがnginxの知識が足りておらずどういう設定が必要なのかを調べることができませんでした。

  • ためしにログインのAPIをPOSTした際に適当なキー/値でCookieを設定してみたところこちらはうまくブラウザに保存されたのでセッション絡みのCookieがうまくいっていないようです

ソースコード

app.js

javascript

const createError = require('http-errors'); const express = require('express'); const session = require('express-session') const cookieParser = require('cookie-parser'); const logger = require('morgan'); const cors = require('cors') //generate app const app = express(); app.set('trust proxy', 1); //set env require('dotenv').config(); //set middleware app.use(logger('dev')); app.use(cors({ origin: process.env.CLIENTORIGIN, credentials: true, optionsSuccessStatus: 200, })) app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(session({ secret: 'node_app_template', resave: true, saveUninitialized: false, proxy: true, cookie: { httpOnly: true, maxAge: 60000, secure: true, sameSite: 'none', } })) ...

login.js(API部分のソース)

javascript

var express = require('express'); var router = express.Router(); const passport = require('../auth') router.use(passport.initialize()) router.use(passport.session()) router.post('/login', passport.authenticate('local'), (req, res) => { // この記載を試しにコメントインするとこのCookieは問題なく保存される // res.cookie('testCookie', 'testValue', { // httpOnly: true, // maxAge: 60000, // secure: true, // sameSite: 'none', // }) res.json( {result: req.user }) } ) router.post('/logout', (req, res) => { // req.session.passport.user = undefined; req.logout(); res.json({ result: req.user }) }) module.exports = router;

nginx.conf

events{ } http{ server { listen 80 default; server_name localhost; } server { listen 443 ssl; location / { proxy_pass http://172.30.0.2:3000; proxy_set_header X-Forwarded-For $remote_addr; } ssl_certificate /etc/certs/localhost.pem; ssl_certificate_key /etc/certs/localhost-key.pem; } }

良い質問の評価を上げる

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

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

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

気になる質問をクリップする

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

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

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

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

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

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

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Cookie

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

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

セッション

Sessionはクライアントがサーバに送ったすべてのリクエストのことを指します。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。