ReactJSフェッチ要求からバックエンドにクッキーを設定する方法

Question

ノードフロントエンドと対話している反応フロントエンドがあります。私は要求などをすることができます。しかし、私は戻ってくるクッキーを設定できないことに気付きました。私のバックエンドは、ログイン時にメッセージとCookieで応答します。私はこれをどのようにしなければならないのですか？

関連するコード：

import React from "react"; 
import Fetch from 'react-fetch'; 

export class Loginform extends React.Component{ 
    constructor(){ 
    super(); 
    this.state = {message : ""}; 
    this.state = {cookie : ""}; 
    } 

    Login(e){ 
    e.preventDefault(); 
    var Email_Address = this.refs.Email.value; 
    var Password  = this.refs.Password.value; 

    fetch("http://localhost:5000/api/form", { 
     method: "POST", 
     headers: { 
      "Content-Type":"application/json", 
      "Accept":"application/json" 
     },credentials: "include", 
     body: JSON.stringify({ 
      Email_Address: Email_Address, 
      Password: Password 
     }) 
     }).then(response=>response.json()) 
     .then(response => this.setState({message: response.Message, cookie :response['x-access-token']})); 
    } 

    render(){ 
     return(
    <div className="LoginContainer"> 
    <form name="Loginform" method="post" action="http://localhost:5000/api/tavern" onSubmit={this.Login.bind(this)}> 
    <div className="block"> 
    <label><i className="fa fa-envelope"></i></label> 
    <input ref="Email" type="email" placeholder="E-Mail" required title="Enter Valid E-Mail Address"/> 
    <i className="fa fa-check" aria-hidden="true"></i> 
    </div> 
    <div className="block"> 
    <label><i className="fa fa-lock"></i></label> 
    <input ref="Password" type="password" placeholder="Enter Your Password" pattern=".{9,}" required title="9 Characters Minimum"/> 
    <i className="fa fa-check" aria-hidden="true"></i> 

    </div> 
    <div className="returnmessage"> {this.state.message}</div> 
    <div className="buttons"> <button type="submit" value="Submit">Login</button></div> 
    </form> 
    </div> 
     ); 
    } 
} 

私は該当する下記の回答をするためにこれを追加する必要がありました：
NPMインストール反応-クッキーは '反応-クッキー'

から
輸入クッキーを--save

ここは私のコードです。

fetch("http://localhost:5000/api/tavern", { 
     method: "POST", 
     headers: { 
      "Content-Type":"application/json", 
      "Accept":"application/json" 
     },credentials: "include", 
     body: JSON.stringify({ 
      Email_Address: Email_Address, 
      Password: Password 
     }) 
     }).then(response=>response.json()) 
     .then(function (data){ 
      console.log(data); 
      cookie.save('x-access-token', data['x-access-token']); 
      this.setState({message: data.Message, cookie :data['x-access-token']}) 
     }.bind(this) 
    ) 

    } 

Answer 1

あなたがしていることは、クッキーを設定していないことです。あなたは単にクッキーと呼ばれる状態で変数を作成しています。

thisパッケージをインストールしてください。

正しい構文は

Cookies.set('access_token', response.headers['x-access-token']) 

今では、実際には、ブラウザのクッキーにに格納されています。

Cookies.get('access_token')