如何使用 react 和 express 设置 cookie

Question

我正在使用 React 和 Express 构建 FullStack 应用程序。我想使用 JWT 进行身份验证，但无法将 cookie 发送到浏览器。当我点击表单提交时，一切都很好，因为我可以在我的数据库中看到一个新用户，但我需要在我的浏览器中使用 jwt 我的代码： 反应：

import React from 'react';
import { useForm } from 'react-hook-form';
import Input from '../../styledComponents/Input';
import Button from '../../styledComponents/Button';
import Link from '../../styledComponents/Link';
import FlexWrapper from '../../styledComponents/FlexWrapper';
import InputWrapper from '../../styledComponents/InputWrapper';
import Span from '../../styledComponents/Span';
import axios from 'axios';
const Form = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = async ({ email, password }) => {
        try{
            const res = await axios.post('http://localhost:5000/signup', {
                email,
                password
              })
        }
        catch (err) {
            console.log(err)
        }
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <InputWrapper>
                <Input type='text' placeholder='Email' name='email' ref={register} />
                <Span>Email</Span>
            </InputWrapper>
            <InputWrapper>
                <Input type='password' placeholder='Password' name='password' ref={register} />
                <Span>Password</Span>
            </InputWrapper>
            <FlexWrapper direction='row' justify='center' align='center' width='100%'>
                <Link href='/'>Already have account?</Link>
            </FlexWrapper>
            <FlexWrapper direction='row' justify='space-between' align='center' width='100%'>
                <Button 
                bgColor={({theme}) => theme.colors.main}
                color={({ theme }) => theme.colors.white}
                >Sign Up</Button>
                <Button 
                bgColor={({theme}) => theme.colors.white} 
                color={({ theme }) => theme.colors.black}
                >Guest</Button>
            </FlexWrapper>
        </form>
    )
}

export default Form;

和快递： Server.js：

const express = require('express');
const app = express();
const port = 5000;
const mongoose = require('mongoose');
const authRoutes = require('./routes/authRoutes');
const cookieParser = require('cookie-parser');
const cors = require('cors');

// middlewares
app.use(express.json());
app.use(cookieParser());
app.use(cors())

// database connection
const dbURI = 'mongodb+srv://[HIDE]@weatherapp.ye3be.mongodb.net/weather-app-users';
mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true })
    .then(result => app.listen(port, () => {
        console.log(`I am listening a port ${port}`)
    }))
    .catch(err => console.log(err))

app.get('/', (req, res) => {
    res.send('sdaasda')
})

app.use(authRoutes);

和我的控制器：

const User = require('../models/User');
const jwt = require('jsonwebtoken');

// handle errors
const handleErrors = (err) => {
  let errors = {
    email: '',
    password: ''
  }
  // duplicate error code
  if(err.code === 11000){
    errors.email = 'That email is already registered';
    return errors;
  }

  // validation errors
  if(err.message.includes('user validation failed')) {
    Object.values(err.errors).forEach(({ properties }) => {
      errors[properties.path] = properties.message
    })
  }
  return errors;
}

// create json web token
const maxAge = 3 * 24 * 60 * 60;
const createToken = (id) => {
  return jwt.sign({ id }, 'test', {
    expiresIn: maxAge
  });
};


module.exports.signup_post = async (req, res) => {
  const { email, password } = req.body;

  try{
    const user = await User.create({ email, password });
    const token = createToken(user._id);
    res.cookie('jwt', token, { httpOnly: true, maxAge: maxAge * 1000 });
    res.status(201).json({ user: user._id });
    console.log(user._id)
  }
  catch (err) {
    const errors = handleErrors(err);
    res.status(400).json({ errors })
  }
}

module.exports.login_post = async (req, res) => {
    res.send('Post - Login Page');
}

我应该能够在发布请求后在浏览器中看到一个 cookie，但我在应用程序中看不到它 -> 浏览器中的 cookie...

Answer 1

快递：

router.use((req, res, next) => {
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requiest-With, Content-Type, Accept');
  if (env === 'local') {
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  }
  res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, HEAD, OPTIONS');
  next();
});

与 axios 反应

import axios from 'axios';

axios.defaults.withCredentials = true;

...

export async function login(val) {
  const response = await axios.post(`${originAndPort}/login`, val)
    .then((res) => {
      // your code here   
      return res                                           
    })
    .catch((error) => {
      // your error here  
    });
  return response;
}

更多信息在这里： Make Axios send cookies in its requests automatically

Answer 2

如果您想将数据存储在 cookie trty 中

import cookie from 'js-cookie';

cookie.set('nameForData',data);

Answer 3

更现代的方法是使用 localStorage 或 sessionStorage 您可以根据api的响应直接将数据存储在前端的存储中 你可以试试下面的代码：

    const onSubmit = async ({ email, password }) => {
        fetch(http://localhost:5000/signup, {
             method: "POST", 
             header: {content-type: "application/json"},
             body: {email: email, password: password}}
    ).then((res)=> res.json();
      console.log(res);
    localStorage.setItem('testObject', JSON.stringify(res));
)
        
    }