Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug?]: Fetch on SSR is missing Cookie on request header #1675

Closed
2 tasks done
risk1996 opened this issue Nov 11, 2024 · 1 comment
Closed
2 tasks done

[Bug?]: Fetch on SSR is missing Cookie on request header #1675

risk1996 opened this issue Nov 11, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@risk1996
Copy link

risk1996 commented Nov 11, 2024 •
edited
Loading

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

It seems that on the current SSR rendering phase, the cookie header is not passed properly to GET API routes.

Expected behavior 🤔

The cookie header is passed properly to the GET API routes.

Steps to reproduce 🕹

Assuming I have these 2 files:

// src/routes/index.tsx
import { createEffect, createResource } from 'solid-js';

export default function Home() {
  const [res, { refetch }] = createResource(() =>
    fetch("http://localhost:3000/api/test", { credentials: "include" })
      .then(res => res.json())
  )
  createEffect(() => console.log(JSON.stringify(res)))

  return (
    <main class="w-full p-4 space-y-2">
      <button onClick={() => refetch()}>
        Refetch
      </button>
    </main>
  );
}
// src/routes/api/test.ts
import type { APIEvent } from "@solidjs/start/server";

export function GET(event: APIEvent) {
  console.log("nativeEvent cookie:", event.nativeEvent.headers.get("cookie"))
  console.log("request     cookie:", event.request.headers.get("cookie"));
  return { body: "Hello, world!" };
}

And a valid cookie to send to the server (either set by set-cookie response header or manually added on the browser devtools):

foo=bar

Then, visit the page on http://localhost:3000/, and click the Refetch button. The log on vinxi server will show (comment added for clarity):

// when page rendering
nativeEvent cookie: null
request     cookie: null
// when "Refetch" button is clicked
nativeEvent cookie: foo=bar
request     cookie: foo=bar

Context 🔦

I am trying to do SSR with authorization session stored in HttpOnly cookie, as instructed by the best practices laid out on Lucia Auth documentations.

I have also tried modifying the src/entry-server.tsx into the following:

// @refresh reload
import { createHandler, StartServer } from "@solidjs/start/server";

export default createHandler((context) => {
  console.log("entry-server cookie:", context.request.headers.get("cookie"));

  return (
    <StartServer
      document={({ assets, children, scripts }) => (
        <html lang="en">
          <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link rel="icon" href="/favicon.ico" />
            {assets}
          </head>
          <body>
            <div id="app">{children}</div>
            {scripts}
          </body>
        </html>
      )}
    />
  );
});

And was able to get this log on the vinxi console:

entry-server cookie: foo=bar

It should proves that the cookie is sent on the initial page request.

Your environment 🌎

System:
  OS: MacOS Sequoia 15.1
  CPU: Apple M1 Max
Binaries:
  bun: 1.1.34 - /opt/homebrew/bin/bun
npmPackages:
  @solidjs/router: ^0.15.0
  @solidjs/start: ^1.0.10
  solid-js: ^1.9.2
  vinxi: ^0.4.3

EDIT 1: Adding { credentials: "include" } on the second fetch parameter did not change the result.
@risk1996 risk1996 added the bug Something isn't working label Nov 11, 2024
@risk1996
Copy link
Author

It seems that have to modify the fetch code as follows:

  const [res, { refetch }] = createResource(() => {
    const event = getRequestEvent();
    return fetch("http://localhost:3000/api/test", { headers: event?.request.headers })
      .then(res => res.json())
  })

Thank you to @Brendonovich for your quick answer on the Discord!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@risk1996