Question

我有一个正在与节点后端通信的反应前端。我能够提出要求等。但是，我注意到我无法设置我要回来的cookie。我的后端会在登录时回复，并带有消息和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
  从'react-cookies'中导入cookie

以下是我的代码。

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

您正在做的不是设置cookie。您只是在名为cookie的状态下创建变量。

安装this包。

正确的语法是

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

现在它实际存储在您的浏览器cookie中。您可以继续使用

进行访问

Cookies.get('access_token')

Answer 2

对于[('A is true', 'B is true', 'C is true'), ('A is true', 'B is true', 'C is false'), ('A is true', 'B is false', 'C is true'), ('A is true', 'B is false', 'C is false'), ('A is false', 'B is true', 'C is true'), ('A is false', 'B is true', 'C is false'), ('A is false', 'B is false', 'C is true'), ('A is false', 'B is false', 'C is false')]，您还可以使用react软件包。如果使用React版本react-cookie，则可以使用React Hooks。

>16.8.0

ReactJS如何将Cookie从获取请求设置为后端

2 个答案: