sveltejs / sveltejs/kit

Consider the URL that comes into `handleFetch`

Open
#11,128 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

fetch-headers
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

I have two apps served behind a reverse proxy; requests to /api/* get forwarded to my API server, and all the others are forwarded to my SvelteKit app.

In my SvelteKit app's load functions, I use fetch('/api/some-api-endpoint') to send requests to the API (which is, again, separate from the SvelteKit app). I also have a handleFetch hook that looks at these requests, and and changes their URL to fetch('http://localhost:5000/some-api-endpoint') (where localhost:5000 is the server app), in order to take a shortcut (very similar to the example in the docs).

The problem is I have to manually forward the Cookie header and so on, because the modified URL is no longer considered the same origin:

export async function handleFetch({ request, event, fetch }) {
    const thisOrigin = new URL(event.request.url).origin;
    if (request.url.startsWith(thisOrigin + '/api')) {
        request = new Request(request.url.replace(thisOrigin, PRIVATE_API_ORIGIN), request);
        // Manually forward headers...
    }
    return fetch(request);
}

SvelteKit will also automatically send an Origin header along with the request, which is not actually needed in this case, because (thankfully) SvelteKit only "simulates" CORS based on the "original" URL, and not the URL coming out of handleFetch, and rightly so, because handleFetch only runs on the server:
https://github.com/sveltejs/kit/blob/dbbd4c7fc1ae2abef584a29a688e2247a80b9792/packages/kit/src/runtime/server/page/load_data.js#L237-L240

What I'm suggesting is that all the logic here:
https://github.com/sveltejs/kit/blob/dbbd4c7fc1ae2abef584a29a688e2247a80b9792/packages/kit/src/runtime/server/fetch.js#L34-L70

Should ALSO be based on the "original" URL (and not the URL modified by handleFetch), in order to simulate browser behavior more accurately. The current behavior is inconsistent. Tell me if I'm wrong.

Reproduction

N/A

Logs

No response

System Info
System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 8.07 GB / 11.63 GB
    Container: Yes
    Shell: 3.6.1 - /home/linuxbrew/.linuxbrew/bin/fish
  Binaries:
    Node: 20.6.0 - /home/linuxbrew/.linuxbrew/bin/node
    npm: 9.8.1 - /home/linuxbrew/.linuxbrew/bin/npm
    pnpm: 8.7.1 - /home/linuxbrew/.linuxbrew/bin/pnpm
    bun: 1.0.11 - ~/.bun/bin/bun
  npmPackages:
    @sveltejs/adapter-node: ^1.3.1 => 1.3.1
    @sveltejs/kit: ^1.27.6 => 1.27.6
    svelte: ^4.2.5 => 4.2.5
    vite: ^4.5.0 => 4.5.0
Severity

serious, but I can work around it

Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/kit/src/runtime/server/fetch.js lines 34-70 and compare its URL handling with packages/kit/src/runtime/server/page/load_data.js lines 237-240. Trace how handleFetch changes the request URL, then verify that the fetch logic uses the original URL consistently; done means the behavior matches the browser-like behavior described without requiring manual forwarding of same-origin headers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
api, backend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.