Cookies null 从前端看，但在 postman 中可见

Question

您好，我正在使用 react js 和 node js 练习 jwt 身份验证

每当用户登录时，jwt 令牌在 cookies 中设置如下

我只是匹配 email 不是当前专注于维护会话的密码

exports.login = async(req,res)=>{


    const u  = await User.findOne({
        where:{
            email:{
            [Op.eq]:req.body.email
        }
        }
    })
if(u!=null)
{
    
    const token = jwt.sign({_id: u.id}, process.env.JWT_SECRET)
    
    
const cookie = req.cookies.token;
console.log("I  am cookies",cookie) //shows token in postman but null when logged in from react frontend
if (cookie == undefined){
    
res.cookie('token', token, {httpOnly: true});


}

return res.status(200).json({"status":200,message:"login success"});

}else
{
    res.json({"status":400,"message":"Login Failed"})
}

}

我的检查令牌方法

exports.checkToken =async(req,res)=>
{
   
    console.log("DATA ONE: ", req.cookies.token)
    const req_token = req.cookies.token
    let auth = false;
    if(!req_token)
    {
        return res.json({"message":"Login Again"})
    }
    try{
        if(!jwt.verify(req_token,process.env.JWT_SECRET))throw 'token not valid';
        else{
            auth =true;


        }


    }catch(err)
    {
            console.log("Invalid TOken")
    }

    if(!auth)
    {
        return res.json(400).json({"message":"token verification failed"})
    }else
    {
        const data = jwt.verify(req_token,process.env.JWT_SECRET)
        console.log(data)
          User.findOne({
            where:{
                id:{
                [Op.eq]:data._id}}}).then((user)=>{
                    
                    if(!user)
                    {
                        return res.status(400).json({"error":"user not found"})
                    }
                    const {id,email}=user
                    return res.status(200).json({user:{id,email}})
                })
              
                
    }
}

我正在使用 cookie-parser 并将其定位在我的路线之前，这样就不会发生顺序冲突

我的 server.js 文件

const express = require('express');
const sequelize = require('./config/connection');
const bodyParser = require('body-parser')
    var cors = require("cors");

    var cookieParser = require("cookie-parser");
var app = express();
app.use(cookieParser())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(cors())

app.use('/students',students)
sequelize.sync();
app.listen(port,(err,res)=>{

    console.log(`connected on port number:${port}`)
})

在我的路线文件中，我按如下方式使用我的方法

const express = require('express');
const app = express();
const router = express.Router();
const Authcontroller = require('../controllers/Authcontroller')
router.get("/verifyToken",Authcontroller.checkToken)
router.post("/login",Authcontroller.login)

因此，当我点击路由以检查我的登录功能并验证身份验证令牌时进行测试，两者都可以正常工作并返回 cookies，如图所示

最后，这是我的前端登录 function 和 useEffect 我正在检查令牌是否有效

const isAuthenticated = ()=>
{
  
  axios.get("http://localhost:3855/students/verifyToken").then((res)=>{
console.log(res)
    setUser(res.data.user)

  })
}

React.useEffect(()=>{
  isAuthenticated()
},[])

和我的登录 function

const login = () =>
{
    var options = {
        email:userEmail
    }
    axios.post("http://localhost:3855/students/login",options).then((res)=>{
        
        if(res.data.status == 200)
        {
            console.log("redirect to home ")
        }else
        {
            console.log("redirect to login ")
        }
    }).catch((err)=>{
        console.log(err)
    })
    

    
    
}

我从 postman 和反应前端尝试时正确设置了令牌，但是当我检索它时，我只在 postman 中得到它，而不是在反应前端。

我试图在隐身和不同的浏览器中做，但在那里没有成功

我在反应应用程序中得到的响应是

{ message: "Login Again" }

Answer 1

已解决：通过在指向后端的前端应用程序中使用代理，我添加了“代理”：“http://localhost:3085”

after it I deleted package-lock.json file of my frontend app along with node_modules and then installed npm install after it when I hit url to backend a proxy was created hiding my backend url by showing front-end url http://localhost: 3855/students/login 显示为 http://localhost:3000/students/login

它按预期工作