Can't set Response headers of a page in Fresh 2, what am I doing wrong?

[DANser-freelancer]

In ./routes/admin-panel.jsx

export const handler = define.handlers({
  GET() {
    return ({
      data: {},
      status: 200,
      headers: LoadAdminPanel,
    });
  },
});

export default define.page<typeof handler>(() => {
  return <AdminPanel />;
});

This is supposed to render <AdminPanel /> JSX and give it to the browser with LoadAdminPanel headers, so why does it not have those headers?

[fry69]

If you want to add headers to the Response, you have two options:

• craft your own route response in main.ts
• use middleware

See e.g. the first example in -> https://fresh.deno.dev/docs/concepts/middleware for how that works.

If you want to use middlewares and file based routing but only want a middleware to apply to a specific route, use route groups, see here -> https://fresh.deno.dev/docs/concepts/file-routing#route-groups

(scroll down on that page, the anchor link still does not seem to work on that page, @marvinhagemeister)

Here is an example that works for me:

utils.ts:

import { createDefine } from "fresh";

export interface State {
  admin: boolean;
}

export const define = createDefine<State>();

routes/_middleware.ts:

import { define } from "../utils.ts";

export default define.middleware(async (ctx) => {
  ctx.state.admin = Math.random() < 0.5;
  const res = await ctx.next();
  res.headers.set("Load-Admin-Panel", ctx.state.admin ? "true" : "false");
  return res;
});

routes/admin.tsx:

import { define } from "../utils.ts";

export default define.page((ctx) => {
  return <div>{ctx.state.admin ? "Admin Panel" : "Access Denied"}</div>;
});

[fry69]

Astonishingly this also work with current Fresh 2.1.0 (without the fix):

routes/test.tsx

import { define } from '../utils.ts';

export const handler = define.handlers({
  GET() {
    return ({
      data: {},
      status: 200,
      headers: {'Test-Header': 'Hello from GET handler'}
    });
  },
});

export default define.page<typeof handler>(() => {
  return <div>Test Page</div>;
});

This:

curl -sv http://127.0.0.1:5173/test

correctly returns the Test-Header and the page in the demo layout.

[marvinhagemeister]

yeah that's the only case where it works. It didn't work when you passed a Header instance of [["x-foo", "bar]] like the types suggested.

[DANser-freelancer]

So.. is there an update I can do? Or do I have to wait for Fresh 2.1.1?
The current workaround is headers: Object.fromEntries(<Headers instance>)

[marvinhagemeister]

You can use your workaround until the next version of fresh is released.

[DANser-freelancer]

https://github.com/denoland/fresh/releases says 2.1.1 fixed this but I'm still not getting headers from Headers.