React App + Express.js + Passport.jsを作成するログイン問題

Question

したがって、バックエンドでExpress.jsでCreate React Appを使用しようとしています。私は別のポートで2つを実行しています - フロントエンドは3000、バックエンドは3001です。私はログインシステムにローカルパスポート戦略を使用しています。そして、ログインシステムは正常に動作します。フロントエンドでは、私はlocalhost：3001/register（またはlogin）へのポストリクエストを送信するregister/loginフォームを持っており、ユーザを登録/ログインすることができます。ログインしているユーザーがいる場合は現在ログインしているユーザーのデータを返し、そうでない場合は「認証されていません」というメッセージが表示されたオブジェクトを返します。

app.get('/loggedUserInfo', function(req, res) { 
    if (req.user) { 
     console.log(req.user); 
     res.json(req.user); 
    } else { 
     console.log('not authenticated'); 
     res.json({'message': 'not authenticated'}); 
    } 
}); 

ここで、クライアント側では、この要求の応答に従ってナビゲーションバーを変更したいと考えています。たとえば、ユーザーがログインしている場合は、ログアウトボタンを含むナビゲーションバーが必要になります。ユーザーがログインしていない場合は、ログインと登録ボタン付きのナビゲーションバーが必要になります。だから、リアクトコンポーネントでは、私はこの関連するコードがあります。これは、コンポーネントの状態を変更することになっている

componentDidMount() { 
    fetch('localhost:3001/loggedUserInfo') 
    .then(res => console.log(res.json())); 
} 

を、それだけでテストのために、コンソールへの応答を記録します。そして、ユーザーがログインしているときでも、毎回、「認証されていない」オブジェクトを返します。ユーザがログインしていないようです。

しかし、私がブラウザにlocalhost：3001/loggedUserInfoに行くと、ユーザがログインした後、私は期待した結果を得ます。私は必要なユーザー情報を返します。

これは実際に私を悩ませています。なぜこれが起こるのか分かりません。私はクライアント側のデータが必要です。

var cookieParser = require('cookie-parser'); 
var session = require('express-session'); 
var bodyParser = require('body-parser'); 
var cors = require('cors'); 

app.use(cors()); 
app.use(session({ 
    secret: 'secretKey', 
    resave: false, 
    saveUninitialized: true 
})); 
app.use(passport.initialize()); 
app.use(passport.session()); 

app.use(cookieParser()); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 

Answer 1

私のコメントの拡大：誰もがここでは、私のapp.jsファイルを見たい場合は

は私はそこにする必要があるすべてのものを含めると思います（順番に）関連するコードであり、

問題は、そのフェッチでCookieを送信していないことです。だから あなたのバックエンドは決してクッキーを取得せず、バックエンドのためには にログインしていません。あなたがURLに直接アクセスしたときに動作する理由は、ブラウザが送信するのは です（郵便番号を試してみると、 作業）

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

というタイトルのセクションでは、こちらをご覧ください：フェッチ要求で資格情報を送信します。

fetch(url, { 
    credentials: 'include' 
})