SameSite属性无效的Cookies HTTPONLY MERN [英] SameSite property invalid Cookies HTTPONLY MERN

问题描述

Same site property=None没有应用，而且，它告诉我属性无效！我被弄糊涂了，因为没有关于这么有帮助的答案！我正在构建MERN应用程序，需要将JWT令牌存储在HTTP Only Cookie中。一切都很好，但是在部署到Heroku时(前面和后面的不同URL)，我不能将cookie放在前端，因为浏览器不接受它，因为它默认设置了相同的site lax属性。我尝试添加该属性，如下所示： 我的快速代码

res.cookie("nToken", token, {
        maxAge: 2 * 60 * 60 * 1000000000,
        httpOnly: true,
        path: "/",
        sameSite: "none",
        secure:true,
        expires: new Date(new Date().getTime() + 86409000).toUTCString(),
      });

HTTP/1.1 200 OK
Server: Cowboy
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: <here's my app link>
Vary: Origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Set-Cookie
Set-Cookie: HttpOnly;Secure;SameSite=None
Set-Cookie: nToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYwYzM5ODg1ODIzMzlhMDAxNWMyMTcwMSIsImVtYWlsIjoiZW1haWxAbWFpbC5tZSIsImlhdCI6MTYyMzQzMTMwMSwiZXhwIjoxNjU0OTg4MjI3fQ.2P01XOOfEcDJYAuVc5Yzui60eG7IoIpFLRwO_AWix3g; Max-Age=7200000000; Path=/; Expires=Thu, 09 Aug 2249 01:08:21 GMT; HttpOnly; Secure
Content-Type: text/html; charset=utf-8
Content-Length: 54
Etag: W/"36-aZJNemOi1ZLLvYvfnmd2IxO+/h4"
Date: Fri, 11 Jun 2021 17:08:21 GMT
Via: 1.1 vegur

当我添加缺少属性时，我收到对象属性无效的错误！或者诸如此类的事情。有任何帮助我都会很高兴的！以前有人经历过吗？我尝试将其设置为FALSE/NONE、&QOOT；NONE&QOOT；、&QOOT；NONE&QOOT；-没有区别！更多的错误！ server.js主后台文件：

const { shouldSendSameSiteNone } = require('should-send-same-site-none');

app.use(cookieParser());


app.use(shouldSendSameSiteNone);


const corsOptions = {
  origin: "here comes my link of frontend",
  credentials: true, //access-control-allow-credentials:true
  methods: ['POST', 'PUT', 'GET', 'OPTIONS', 'HEAD'],
  optionSuccessStatus: 200,
};

app.use(cors(corsOptions));

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Credentials", true);
  res.header('Access-Control-Allow-Headers', 'Set-Cookie');
  res.header("Set-Cookie", "HttpOnly;Secure;SameSite=None");
  // res.header(
  //   "Access-Control-Allow-Headers",
  //   "Origin, X-Requested-With, Content-Type, Accept"
  // );
  res.header("Access-Control-Allow-Origin", "here comes my link of frontend");

  next();
});

(我删除了一些代码，因此可读性更好)

调用它的前端代码：

 useEffect(() => {
    document.querySelector("#signUp").addEventListener("click", async () => {
      const email = document.querySelector("#emailInput");
      const password = document.querySelector("#passInput");
      const res = await axios({
        method: "POST",
        url: vars.BACKENDURL + "/usercreate",
        withCredentials: true,
        data: { user: { email: email.value, password: password.value } },
      });
    });
  }, []);

推荐答案

已解决！只需将我的A帖子中提到的语法替换为以下语法：

res.header("Set-Cookie", "nToken=" + token + ";Path=/;HttpOnly;Secure;SameSite=None;Expires=31556926");

这篇关于SameSite属性无效的Cookies HTTPONLY MERN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！