fetch：フェッチ応答からクッキーを取得する

Question

私はfetch on reactを使用してクライアントログインを実装しようとしています。

私は認証にパスポートを使用しています。私が"username or password is wrong"のような私のエクスプレスサーバからエラーメッセージを受信できるようにするために、私がfetchを使用していて普通のform.submit()でない理由があります。

私はパスポートがflashメッセージを使ってメッセージを返信できることを知っていますが、flashにはセッションが必要なので、私はそれらを避けたいと思います。

これは私のコードです：

しかし、クロムは、クッキーを設定していない、：あなたがChromeの開発ツール上で見ることができるように

fetch('/login/local', { 
     method: 'POST', 
     headers: { 
     Accept: 'application/json', 
     'Content-Type': 'application/json', 
     }, 
     body: JSON.stringify({ 
     username: this.state.username, 
     password: this.state.password, 
     }), 
    }).then(res => { 
     console.log(res.headers.get('set-cookie')); // undefined 
     console.log(document.cookie); // nope 
     return res.json(); 
    }).then(json => { 
     if (json.success) { 
     this.setState({ error: '' }); 
     this.context.router.push(json.redirect); 
     } 
     else { 
     this.setState({ error: json.error }); 
     } 
    }); 

サーバは、うまくクッキーを送信アプリケーション - > Cookies - > localhost：8080： "サイトにはCookieがありません"と表示されます。

どのように動作させるか考えてください。

Answer 1

フェッチオプションcredentials: same-origin/includeが設定されていない問題が判明しました。 フェッチ・ドキュメントには、リクエストでクッキーを送信するためにこのオプションが必要であることが記載されているため、クッキーを読むときにこれを言及しませんでした。

だから、僕は、このようなことに私のコードを変更：

fetch('/login/local', { 
     method: 'POST', 
     headers: { 
     Accept: 'application/json', 
     'Content-Type': 'application/json', 
     }, 
     credentials: 'same-origin', 
     body: JSON.stringify({ 
     username: this.state.username, 
     password: this.state.password, 
     }), 
    }).then(res => { 
     return res.json(); 
    }).then(json => { 
     if (json.success) { 
     this.setState({ error: '' }); 
     this.context.router.push(json.redirect); 
     } 
     else { 
     this.setState({ error: json.error }); 
     } 
    });