SameSite属性无效的Cookies HTTPONLY MERN

2022-03-12 00:00:00 backend express cookies javascript httponly

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");

相关文章