SVELTE 在一个请求中设置多个 Http cookie headers

Question

自从 svelte 上次更新以来，我遇到了一个问题。当我尝试在一个请求中添加多个 set-cookie 时，只执行第一个。我搜索了 5 天，但没有找到任何解决方案。

配置

前端 - SvelteKit v1.0.0-next.234 后端 - Strapi 3.6.1（v4.x.x 不使用 mongoDb 如果我理解得很好） Db-mongo

Svelte 更新之前有效的方法

我使用我的凭据（用户名、密码）调用我的登录端点，并等待 jwt 令牌响应。当我收到它时，我将它放在我的 http 请求 headers 中的其他元素中。在 hook.js 文件中，我解析了这个 header cookie 并将其添加到我的 request.locals。因此，我可以在挂钩的 getSession() 方法中使用我的请求局部变量。

Login.json.js端点

... all the query logic
const user = await login();
// ==> I get the jwt token

const cookieOptions = {
 Secure: secure ? 'Secure;' : '',
 httpOnly: true,
 sameSite: sameSite,
 path: "/",
 maxAge: 60 * 60 * 24 * 7
}
const setUsername = cookie.serialize(`${COOKIE_NAME}`, user.user.username, cookieOptions);
const setJwt = cookie.serialize("jwt", user.jwt, cookieOptions);
const setCompId = cookie.serialize("_cId", user.user.company._id, cookieOptions); 


// what worked before, but stop working after svelte framework update
const headers = {        
 'Set-Cookie': [setUsername, setJwt, setCompId]
}

// what I do know to find a way to solve it
let headers = new Headers();
headers.append('Set-Cookie',setUsername);
headers.append('Set-Cookie',setJwt);
headers.append('Set-Cookie',setCompId);

// the response
return {
  body: {
   user
  },
 headers,
 status: 200
 }

我试过放一个纯文本 cookie，像这样：

cookiename=我的用户名； Max-Age=604800；路径=/;仅限HTTP； SameSite=严格，jwt=xxx.xxx.Xxx； Max-Age=604800；路径=/;仅限HTTP； SameSite=严格，_cId=sjckjsdhfjkqsdhfjk； Max-Age=604800；路径=/;仅限HTTP； SameSite=严格

只有第一个 cookie 设置在 header 和浏览器中。

hook.js

在我的钩子文件中，我不得不将句柄函数 du 接收到的 object 更改为 Svelte update

由此

export async function handle({request,resolve}){
 const cookies = cookie.parse(request.headers.cookie || "");
...
}

对此

export async function handle({event,resolve}){
 let cookies = event.request.headers.get("cookie")
...
}

问题是我只有一个 cookie 值，而不是 3 个。

我没有找到解决方案。我想我可以在我的登录响应中的第一个 cookie 值内传递我的所有参数，但是，我认为这不是一个好主意。

我正在寻求帮助，因为我无法继续我的项目。我的仪表板页面调用取决于首先收集的这 3 个元素。

谢谢大家

更新 1

我已经更改了 Thommas 建议的代码

const headers = new Headers()
headers.append('Set-Cookie', [setUsername, setJwt, setCompId].join(','))

当我 console.log header 没问题时，我用逗号分隔我的 3 个元素。

console.log(headers.get('Set-Cookie'));
// => result string : 
/*
MYCOOKIENAME=ItIsOk; Max-Age=604800; Path=/; HttpOnly; SameSite=Strict,jwt=xxx.xxxx.xxxx.xxxx.Xxx.etc...; Max-Age=604800; Path=/; HttpOnly; SameSite=Strict,_cId=ItIsOk; Max-Age=604800; Path=/; HttpOnly; SameSite=Strict
*/

但是，当我查看 hooks.js 中的请求 header 时，我仍然得到第一个。

console.log("==>\n",event.request.headers,"\n<==\n")

// result 
{
  accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7',
  'cache-control': 'no-cache',
  connection: 'keep-alive',
  cookie: 'MYCOOKIENAME=ItIsOk',
  host: 'localhost:3000',
  pragma: 'no-cache',
  referer: 'http://localhost:3000/login',
  'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"',
  'sec-ch-ua-mobile': '?0',
  'sec-ch-ua-platform': '"macOS"',
  'sec-fetch-dest': 'document',
  'sec-fetch-mode': 'navigate',
  'sec-fetch-site': 'same-origin',
  'sec-fetch-user': '?1',
  'upgrade-insecure-requests': '1',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36'
}

可能是我的returnobject错了

return {
 body: {
  user
 },
 headers,
 status: 200
 }
}

我你有什么想法！我会继续处理这个问题，因为我完全阻止了！

Answer 1

根据 Is it possible to set more than one cookie with a single Set-Cookie?，Set-Cookie 允许 comma-separated cookie 声明列表。

加入最近在 v1.0.0-next.234 中对 SvelteKit 所做的重大更改，然后您应该以这种方式设置多个 cookie：

const cookieOptions = {
 Secure: secure ? 'Secure;' : '',
 httpOnly: true,
 sameSite: sameSite,
 path: "/",
 maxAge: 60 * 60 * 24 * 7
}
const setUsername = cookie.serialize(`${COOKIE_NAME}`, user.user.username, cookieOptions);
const setJwt = cookie.serialize("jwt", user.jwt, cookieOptions);
const setCompId = cookie.serialize("_cId", user.user.company._id, cookieOptions); 

const headers = new Headers({        
 'Set-Cookie': [setUsername, setJwt, setCompId].join(',')
})

Answer 2

这在

中讨论过

https://github.com/sveltejs/kit/issues/3460

您可以使用 response.headers.append(headerName, headerValue) 添加 header 而不会覆盖现有的。只需为您需要的每个 set-cookie 调用它即可。

SVELTE 在一个请求中设置多个 Http cookie headers

SVELTE set multiple Http cookies in one request headers

strapi

svelte

sveltekit

配置

Svelte 更新之前有效的方法

更新 1