Skip to main content

h3 framework

H3 is a minimal h(ttp) framework built for high performance and portability

它是一個微型 framework 處理 render, http 等等相關情

h3

send

send: (event: H3Event, data?: any, type?: string) => Promise<void>;

在 nuxt3 中的 server middleware 中,可以直接 render html 可以用於 cache html 後 render 到畫面上

export default defineEventHandler((event) => {
send(event, "<h1>title</h1>", "text/html");
// to();
// from();
});

setResponseHeader

設定 res 的 header 的值
export default defineEventHandler((event) => {
setResponseHeader(event, "name", "thomas");
});

getCookie & setCookie

在 server 端拿到 request 的 cookie, 在 server 端設定 cookie 回到 browser。如果是在 client 端設定 cookie ,可以參考 Nuxt3 的 cookie 操作

const name = getCookie(event, "name");
console.log("event", event);
setCookie(event, "access_token", "token", {
httpOnly: true,
...
// option
});

options

傳入一個物件來設置多個 cookie 屬性

  • maxAge: 指定 Max-Age 屬性的值,單位是。如果沒有設置,則這個 cookie 將會是 Session Only,意即網頁關閉後就會消失。
  • expires: 指定一個 Date 物件來作為過期的時間,通常是要相容比較舊的瀏覽器做使用,如果 maxAgeexpires 屬性都有設定,則過期時間應該要設定為一樣。
  • httpOnly: 是一個布林值,預設為 false,當設置為 true 時,表示客戶端的 JavaScript 將無法使用 document.cookie 來查看這個 cookie。通常是比較敏感或機密的訊息,如 Token 或 Session Id 會設定為 true,只讓瀏覽器發出請求時自動夾帶。
  • secure: 是一個布林值,預設為 false,當設置為 true 時瀏覽器得是 HTTPS 的加密傳輸協定的情境下,才會自動夾帶這個 cookie。
  • domain: 指定 cookie 可以適用的 Domain,通常會保持預設,表是適用於自己的 Domain 之下。
  • path: 指定 cookie 適用的路徑。
  • sameSite: 為一個布林值或是字串,用於設定安全策略
  • encode: 由於 cookie 的值只能使用有限的字元集,所以這個設置可以將 cookie 編碼成合法的字串值,預設的編碼是使用 JSON.stringify + encodeURIComponent()
  • decode: cookie 會經過一個解碼的過程,預設的解碼是使用 decodeURIComponent + destr
  • default: 為一個函數,可以用於回傳 cookie 的預設值,也可以是回傳一個 Ref

setHeader

設定 cache-control

export default defineEventHandler((event) => {
let res = event.res;
const year = 31536000;
const hour = 60 * 60;
const url = event.req.url;
const maxage = url.match(/(.+)\.(jpg|jpeg|gif|css|png|js|ico|svg|mjs)/) ? year : hour;
res.setHeader("Cache-Control", `max-age=${maxage} s-maxage=${maxage}`);
});

參考文章

https://github.com/unjs/h3

https://www.jsdocs.io/package/h3#setCookie