NodeJS 如何设置cookie express,react.js

falq053o  于 2022-11-04  发布在  Node.js
关注(0)|答案(5)|浏览(282)

我正在为node.jsreact.js使用express构建一个登录系统。在我的后端,当一个用户登录时,它会创建一个cookie。当我进入网络〉登录时,我可以看到:
设置Cookie:

user_id=s%3A1.E%2FWVGXrIgyXaM4crLOoxO%2Fur0tdjeN6ldABcYOgpOPk; Path=/; HttpOnly; Secure

但是当我进入应用程序〉Cookies〉http://localhost:3000时,什么都没有。我相信这是因为当我从客户端发出一个post请求时,我不允许凭证正确通过。我该怎么做呢?请告诉我,如果我能以任何方式改进我的问题。

//Login back-end
router.post('/login', (req, res, next) => {
    if(validUser(req.body)) {
        User
            .getOneByEmail(req.body.email)
            .then(user => {
                if(user) {
                    bcrypt
                        .compare(req.body.password_digest, user.password_digest)
                        .then((result) => {
                            if(result) {
                                const isSecure = process.env.NODE_ENV != 'development';

                                res.cookie('user_id', user.id, {
                                    httpOnly: true,
                                    secure: isSecure,
                                    signed: true
                                })
                                res.json({
                                    message: 'Logged in'
                                });
                            } else {
                                next(new Error('Invalid Login'))
                            }
                        });
                } else {
                    next(new Error('Invalid Login'))
                }
            });
    } else {
        next(new Error('Invalid Login'))
    }
});

//Allow CORS index.js
app.use(
cors({
    origin: "http://localhost:3000",
    credentials: true
})
);

//Login client side (React.js)
loginUser(e, loginEmail, password) {
e.preventDefault();

let email = loginEmail;
let password_digest = password;
let body = JSON.stringify({ email, password_digest });

fetch("http://localhost:5656/api/login", {
    method: "POST",
    headers: {
    "Content-Type": "application/json"
    },
    credentials: "include",
    body
})
    .then(response => response.json())
    .then(user => {
    console.log(user);
    });
}
bogh5gae

bogh5gae1#

您应确保在服务器和应用程序中设置“凭据”。
尝试在index.js或app.js服务器端设置以下内容:

app.use(function(req, res, next) {
  res.header('Content-Type', 'application/json;charset=UTF-8')
  res.header('Access-Control-Allow-Credentials', true)
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  )
  next()
})

并在您客户端站点中添加如下选项:

let axiosConfig = {
  withCredentials: true,
}

export async function loginUser(data) {
  try {
    const res = await axios.post(
      `${URL}:${PORT}/${API}/signin`,
      data,
      axiosConfig
    )
    return res
  } catch (error) {
    console.log(error)
  }
}

编辑

要在服务器中设置“凭据”,我们需要以下行:

res.header('Access-Control-Allow-Credentials', true)

这将允许您处理包含在标头中的凭据。
您还必须告诉axios在标头中使用以下命令设置凭据:

withCredentials: true
euoag5mw

euoag5mw2#

不要忘记调整cors中间件。

您的node.js快速代码

const express = require("express");
const cors = require('cors')

const app = express();

app.use(cors(
  {
    origin: 'http://localhost:3000',
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
  }
));

app.use(function(req, res, next) {
  res.header('Content-Type', 'application/json;charset=UTF-8')
  res.header('Access-Control-Allow-Credentials', true)
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  )
  next()
})

app.get("/auth", function(req, res){

  res.cookie('token', 'someauthtoken')
  res.json({id: 2});
});

app.listen(3030);

您的前端代码

import React, { useEffect } from 'react';
import axios from 'axios';

async function loginUser() {
  try {
    const res = await axios.get(
      'http://localhost:3030/auth',
      {
        withCredentials: true,
      }
    )
    return res
  } catch (error) {
    console.log(error)
  }
}

function App() {

  useEffect(() => {
    loginUser();
  }, [])

  return (
    <div>

    </div>
  );
}

export default App;
lp0sw83n

lp0sw83n3#

这是因为您设置了httpOnly: true
这将阻止对客户端的可见性,就像从javaScript document.cookie()阅读一样。
您可以通过将其关闭来解决此问题。

w3nuxt5m

w3nuxt5m4#

如果你在浏览器中看不到你的cookie,我想这是因为你在cookie的选项中设置了hhtpOnly为true。
cookie.httpOnly指定HttpOnly Set-Cookie属性的布尔值。如果为true,则设置HttpOnly属性,否则不设置。默认情况下,设置HttpOnly属性。

注意:将其设置为true时要小心,因为兼容的客户端将不允许客户端JavaScript查看document.cookie中的cookie

res.cookie('user_id', user.id, {
                                            httpOnly: false, // try this
                                            secure: isSecure,
                                            signed: true
                                        })
lp0sw83n

lp0sw83n5#

您需要先在后端服务器中配置cors
首先,使用npm i cors安装cors,然后在Express服务器中添加以下代码行:

app.use(cors({
  origin: "YOUR FRONTEND SITE URL HERE",
  credentials: true,
}));

然后,在向后端发送GET/POST请求的前端应用程序中,确保在请求中添加
如果您已经使用了fetch

const res = await fetch('BACKEND SERVER URL', {
   credentials: "include",
   // other objects
});

如果使用axios

const res = await axios.post('BACKEND SERVER URL',  
     { withCredentials: true },
     // other objects,
);

这将解决在前端存储从后端发送的cookie的问题。

相关问题